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


Posted in Javascript onSeptember 03, 2018

1、修改 router/index.js

添加一行

base: 'admin',

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

2、然后修改 config/index.js

增加一行

const assetsPublicPath = '/admin/'

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

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

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通过NGINX部署在子目录或者二级目录实践

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

Javascript 相关文章推荐
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
浅析JS运动
Dec 28 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 Javascript
vue 动态创建组件的两种方法
Dec 31 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 #Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 #Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 #Javascript
webpack4 处理CSS的方法示例
Sep 03 #Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 #Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 #Javascript
webpack4 处理SCSS的方法示例
Sep 03 #Javascript
You might like
PHP读取MySQL数据代码
2008/06/05 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
php实现文件上传基本验证
2020/03/04 PHP
javascript中的location用法简单介绍
2007/03/07 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
Python库安装速度过慢解决方案
2020/07/14 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
个人生活学习自我评价范文
2013/11/26 职场文书
生物科学专业个人求职信范文
2013/12/07 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
节电标语大全
2014/06/23 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
文明家庭事迹材料
2014/12/20 职场文书
杜甫草堂导游词
2015/02/03 职场文书
余世维讲座观后感
2015/06/11 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android