方案一：hash 模式
xxx.com/app1/#/index
- 路由路径直接被前端接管，
#后面的是前端路由 - 优点是部署简单
- 缺点是 url 比较反直觉，也不美观
vue.config.js
module.exports = {
// 默认为 /，表示部署在顶级路径上。打包后的静态资源引用路径为 /xxx.js, /xxx.css
// 使用 ./ 可以使得打包后的 js、css 等资源的引用路径以 ./ 开头
// 假如需要部署的子路径为 /app1，那么此处也可以写成 /app1/，这样也可以保证正常引用
publicPath: './',
}
router.js
export default new Router({
mode: 'hash',
...
});
nginx.conf
location /app1/ {
alias /var/www/app1/dist/;
index index.html;
}
方案二：history 模式
xxx.com/app1/index
- 路由都走到 nginx，再由 nginx 转发回前端的入口文件
- 优点是 url 好看，符合直觉
- 缺点是需要配合 Web Server 才能实现
vue.config.js
module.exports = {
publicPath: '/app1/',
}
router.js
export default new Router({
mode: 'history',
...
});
nginx.conf
location /app1/ {
alias /var/www/app1/dist/;
index index.html;
try_files $uri $uri/ /app1/index.html;
}