1. 实现效果
http://ip:port 访问 A 项目(vue 项目)
http://ip:port/c 访问 B 项目(vue 项目)
2. nginx 配置
location / {
root /usr/local/nginx/html/A/;
index index.html index.htm;
}
location /b {
alias /usr/local/nginx/html/B/;
index index.html index.htm;
}
3. B 项目公共路径修改
按照上面 2 个步骤配置好访问‘ http://ip:port/b ’是无法访问到 B 项目的静态资源的,需要配置 B 项目的公共资源路径:
vue 项目一般在 vue.config.js 中配置:
module.exports = {
// 区分开发和打包分别配置,打包配置的值和nginx配置的保持一致
publicPath: process.env.NODE_ENV == 'development' ? '/' : '/b',
}

文章讲述了如何通过Nginx配置实现Vue项目A和B的访问,包括修改B项目的公共资源路径以及处理刷新页面时的SyntaxError。重点介绍了vue.config.js中的publicPath设置和Nginx的try_files规则。


被折叠的 条评论
为什么被折叠?



