详解vue通过NGINX部署在子目录或者二级目录实践

 更新时间:2018年09月03日 10:18:52   作者:liugx  
这篇文章主要介绍了详解vue通过NGINX部署在子目录或者二级目录实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1、修改 router/index.js

添加一行

base: 'admin',

2、然后修改 config/index.js

增加一行

const assetsPublicPath = '/admin/'

然后修改 下面两处assetsPublicPath 的值为定义的变量

3、部署时,通过NGINX的反向代理

首先,给需要部署的项目定义一个 NGINX 的 server

server {
    listen 8001;
    location / {
      # vue h5 history mode 时配置
      try_files $uri $uri/ /index.html;
  
      root /home/html/travel_admin/dist;
      index index.html index.htm;
    }

  }

再到配置域名的主配置server上做反向代理

server {
    listen 80;
    server_name web.zjj7.com;
    location / {
      # 这里是根目录的项目
      try_files $uri $uri/ /index.html;
      root /home/html/travel/dist;
      index index.html index.htm;
    }
     # 这里是需要部署的二级目录应用配置
    location ^~/admin/ {
     proxy_redirect off;
     proxy_set_header Host $host;
     proxy_set_header X-Real-IP $remote_addr;
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     proxy_pass http://127.0.0.1:8001/;
    }
  }

这要重启NGINX以后,部署就完成了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue.js中ref和$refs的使用及示例讲解

    vue.js中ref和$refs的使用及示例讲解

    这篇文章主要给大家介绍了关于vue.js中ref和$refs使用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • VUE项目调用高德地图的详细步骤

    VUE项目调用高德地图的详细步骤

    要在Web页面中加入地图,我推荐你使用高德地图JSAPI,下面这篇文章主要给大家介绍了关于VUE项目调用高德地图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • 浅谈关于iview表单验证的问题

    浅谈关于iview表单验证的问题

    这篇文章主要介绍了浅谈关于iview表单验证的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 在Vue3中实现拖拽文件上传功能的过程详解

    在Vue3中实现拖拽文件上传功能的过程详解

    文件上传是我们在开发Web应用时经常遇到的功能之一,为了提升用户体验,我们可以利用HTML5的拖放API来实现拖拽文件上传的功能,本文将介绍如何在Vue3中实现这一功能,文中有详细的代码示例供大家参考,需要的朋友可以参考下
    2023-12-12
  • 初试vue-cli使用HBuilderx打包app的坑

    初试vue-cli使用HBuilderx打包app的坑

    这篇文章主要介绍了初试vue-cli使用HBuilderx打包app的坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • Vue基础学习之项目整合及优化

    Vue基础学习之项目整合及优化

    这篇文章主要给大家介绍了关于Vue基础学习之项目整合及优化的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • vue 项目代码拆分的方案

    vue 项目代码拆分的方案

    这篇文章主要介绍了vue 项目代码拆分的方案,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • 详解Vue3的响应式原理解析

    详解Vue3的响应式原理解析

    这篇文章主要为大家介绍了Vue3的响应式原理解析,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • vue之浏览器存储方法封装实例

    vue之浏览器存储方法封装实例

    下面小编就为大家分享一篇vue之浏览器存储方法封装实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 说说Vuex的getters属性的具体用法

    说说Vuex的getters属性的具体用法

    这篇文章主要介绍了说说Vuex的getters属性的具体用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04

最新评论