在开发vue项目的时候,大多都是spa单页面应用,需要部署到服务器根目录;但有时候我们需要部署到其他路径,例如:
/app/
内
怎么才能实现呢?
1、修改配置文件
config/index.js
{
build: {
assetsPublicPath: '/app/',
}
}
router/index.js
let router = new Router({
mode: 'history',
base: '/app/', // 保持和assetsPublicPath路径一致
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
},
routes
})
2、修改nginx配置
server {
listen 9000; // 开启一个服务,监听9000端口
# listen somename:8080;
#server_name somename alias another.alias;
location / {
root /Users/kaixie/code/server; // 设置服务器根目录
try_files $uri $uri/ /app/index.html; // 把所有请求都返回/app/index.html
}
location /api {
proxy_pass http://localhost:2002;
}
}
思考:怎么才能在一个nginx服务里配置两个项目呢?访问根目录是一个项目,访问app路径是一个项目
如下配置
server {
listen 9000;
# listen somename:8080;
#server_name somename alias another.alias;
location / { // 监听根目录访问,这里返回的是正常的spa项目
root /Users/kaixie/code/server;
try_files $uri $uri/ /index.html;
}
location /app { // 监听 app路径的访问, 访问路径处理过的spa项目
root /Users/kaixie/code/server;
try_files $uri $uri/ /app/index.html;
}
location /api {
proxy_pass http://localhost:2002;
}
}