Vue+Nginx实现同域名下部署多个vue项目
vue+nginx实现同域名多项目
·
【场景】www.web.com 默认访问A项目; www.web.com/webB 访问B项目;www.web.com/webC 访问C项目;
一、在vue.config.js中配置publicPath与outputDir
module.exports = {
//process.env.NODE_ENV === "production" ? "./" : "/",这种写法有时候会不生效,具体没找到问题原因
//可以用笨方法,每次打包时手动修改为publicPath:"./",
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
outputDir:"webA",//设置项目打包生成的文件的存储目录,对应项目名称,默认为dist
devServer: {
open:true// 自动打开浏览器
}
}
二、在webA的router文件夹下index.js中设置base,webB、webC项目同理
const router = new VueRouter({
mode:"hash",
base:"webA",
routes,
})
三、配置Nginx,如果router模式为history则需要加上配置 try_files $uri $uri/ /index.html; 否则刷新会404
四、如果输入www.web.com需要进入默认项目,按下方nginx最后一项设置,反之删除掉即可
server{
listen 8080;
location /webB {
# 注意这里是 alias,然后指向的位置使我们生产环境的文件夹的具体位置
# 如果报错,末尾加上"/" 即 alias /web/webB/;
alias /web/webB;
index index.html index.htm;
# uri ,如果router模式为history不加这个项目刷新会出现404问题,hash模式不需要
try_files $uri $uri/ /index.html;
}
location /webC {
# 注意这里是 alias,然后指向的位置使我们生产环境的文件夹的具体位置
# 如果报错,末尾加上"/" 即 alias /web/webC/;
alias /web/webC;
index index.html index.htm;
# uri ,如果router模式为history不加这个项目刷新会出现404问题,hash模式不需要
try_files $uri $uri/ /index.html;
}
# 输入www.web.com需要进入默认webA项目,在webB,webC下面加入以下设置 注意这里是 root 不是 alias
location /{
# 如果报错,末尾加上"/" 即 root /web/webA/;
root /web/webA;
index index.html index.htm;
# uri ,如果router模式为history不加这个项目刷新会出现404问题,hash模式不需要
try_files $uri $uri/ /index.html;
}
}
五、 建议先在自己的本地测试,nginx中将alias || root指向的路径改为自己本地项目的磁盘路径即可
server{
listen 8080;
location /webB {
alias D:/web/webB;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
六、有的同学修改路由的base后,调接口报错404
//试着把接口api前面的 “ / ” 去掉或者加上
"/loac/btc-pulic-manager/api/login"
"loac/btc-pulic-manager/api/login"
七、如果登录后刷新页面还是空白页Bug
后台配置支持是否支持:history,history模式是需要后台配置支持的。
原理是要在服务端增加一个覆盖你的路由内所有情况的候选资源,
如果 URL 匹配不到任何候选资源,则定位到打包好的 index.html 页面,这个页面就是你 app 依赖的页面。
后端配置链接:https://router.vuejs.org/zh/guide/essentials/history-mode.html
更多推荐
已为社区贡献4条内容
所有评论(0)