详解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-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航，在 vue-router 中，导航守卫是一种非常重要的功能，所以本文将详细讲解一下vue-router中的导航守卫，感兴趣的同学跟着小编一起来看看吧2023-07-07
详解vue-cli脚手架build目录中的dev-server.js配置文件
这篇文章主要介绍了详解vue-cli脚手架build目录中的dev-server.js配置文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了vue.js 中使用（...）运算符报错的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue EventBus自定义组件事件传递，组件化应用构建是Vue的特点之一，本文主要介绍EventBus进行数据消息传递 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了Vue+element自定义指令如何实现表格横向拖拽，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
React-Router 路由库，是官方维护的路由库，事实上也是唯一可选的路由库。它通过管理 URL，实现组件的切换和状态的变化，开发复杂的应用几乎肯定会用到2022-09-09
这篇文章主要介绍了vue常用组件之confirm用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了详解Vue2.0之去掉组件click事件的native修饰,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要介绍了vue.config.js中配置Vue的路径别名的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
下面小编就为大家带来一篇使用mint-ui开发项目的一些心得(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论