方案一：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; }