详解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判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
如何使用jquery实现文字上下滚动效果
Oct 12 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
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如何编写易读的代码
2007/07/10 PHP
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
Js动态创建div
2008/09/25 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python原始套接字编程示例分享
2014/02/21 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
小学毕业感言100字
2015/07/30 职场文书
商业计划书范文
2019/04/24 职场文书
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
MySQL 原理与优化之Update 优化
2022/08/14 MySQL