需求
同一个域名安装多个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://域名/admin
location /admin {
alias /www/wwwroot/admin/dist;#这里是你的代码地址
try_files $uri $uri/ /admin/index.html; #解决刷新404 这里的/admin和 location /admin 必须一致
}
# 这个是第三个vue项目 页面访问地址 http://ip:9001/user
location /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;
# }