详解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 相关文章推荐
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
DOM 事件流详解
Jan 20 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
angular共享依赖的解决方案分享
Oct 15 Javascript
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模拟HTTP认证
2006/10/09 PHP
php 文件上传系统手记
2009/10/26 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
php微信开发之谷歌测距
2018/06/14 PHP
javascript来定义类的规范小结
2010/11/19 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
python实现简单爬虫功能的示例
2016/10/24 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
python缩进长度是否统一
2020/08/02 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
JNI的定义
2012/11/25 面试题
工程地质勘察专业大学生求职信
2013/10/13 职场文书
高中运动会广播稿
2014/01/21 职场文书
青奥会口号
2014/06/12 职场文书
综合测评个人总结
2015/03/03 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
python blinker 信号库
2022/05/04 Python