多个vue项目部署到nginx服务器

文章目录

需求
一、项目打包
- 1.vue.config.js
- 2.request.js文件
- 3.打包
二、nginx配置

需求

同一个域名安装多个vue项目。

比如：域名为 https://domain.com + 后缀。那么通过不同的后缀就能去访问不同的项目地址。

https://domain.com，不加任何后缀，访问官网。

https://domain.com/admin，域名加上 /admin，就访问管理后台项。

https://domain.com/user，加上 /user，就访问用户端项目。

一、项目打包

需要注意的文件就两个。request.JS和vue.config.JS。

在env文件中设置VUE_APP_CONTEXT_PATH为/admin/

1.vue.config.js

module.exports = {// 部署生产环境和开发环境下的URL。// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上// 例如 https://www.domain.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.domain.vip/admin/，则设置 baseUrl 为 /admin/。publicPath: process.env.VUE_APP_CONTEXT_PATH,//实际为/admin/// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）outputDir: 'dist',// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）assetsDir: 'static',......
}

2.request.js文件

在router文件夹中index.js文件中修改base为 ‘/admin/’

export default new Router({base: process.env.VUE_APP_CONTEXT_PATH, //调整这里，路径跟publicPath保持一致即可mode: 'history', // 去掉url中的#scrollBehavior: () => ({ y: 0 }),routes: constantRoutes
})

3.打包

1.执行npm run build。可能不一定为build，具体执行命令看package.json的下面这个字段。

在这里插入图片描述

调整完毕后，直接执行build打包命令，可以发现index.html引入js路径增加了/admin

<script src=/admin/static/js/chunk-libs.c52f1d1f.js></script>
<script src=/admin/static/js/app.15183e6d.js></script>

2.将打包好的文件上传到服务器，一般存在于dist文件夹，具体文件夹位置看命令行的提示。
在这里插入图片描述

在服务器上找个文件夹直接丢上去。/www/wwwroot/XXXXXX(项目总域名名字)/app/XXXXX(单个项目名字)。不喜欢可自行发挥，尽量保证这些项目在同一文件下。

二、nginx配置

nginx配置服务，使不同请求地址，去找相应的项目。

我这里使用的宝塔部署(图省事)自己部署也是一样的。

server
{listen 80;server_name 这里填写你的域名;#重定向某个地址# 这个是第一个vue项目 页面访问地址 http://域名/location / {return 302 /admin/select;#我这里是重定向到/admin项目的select页面}
#正常部署第一个项目# 这个是第一个vue项目 页面访问地址 http://域名/location / {root   /www/wwwroot//dist;index  index.html;try_files $uri $uri/ /index.html;}# 这个是第二个vue项目 页面访问地址 http://域名/adminlocation /admin {alias /www/wwwroot/admin/dist;#这里是你的代码地址try_files $uri $uri/ /admin/index.html; #解决刷新404 这里的/admin和 location /admin 必须一致}# 这个是第三个vue项目 页面访问地址 http://ip:9001/userlocation /user {alias /www/wwwroot/user/dist;#这里是你的代码地址try_files $uri $uri/ /user/index.html; #解决刷新404 这里的/user和 location /user 必须一致}# 转发以 /prod-api 开头的请求到后端location /prod-api/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://127.0.0.1:8080/;}
}

注意：如果页面中有二级路由的话，配置文件中一定不能用root，要用alias.

注意如果你也如果配置文件中有一下内容请注释

    # location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$# {#     expires      30d;#     error_log /dev/null;#     access_log /dev/null;# }# location ~ .*\.(js|css)?$# {#     expires      12h;#     error_log /dev/null;#     access_log /dev/null;# }