假定条件
该文档是假设你想要把项目部署到/app/下,并可以访问http://localhost:8090/app/下的任意地址
创建.env文件
该文件应创建在package.json同级目录下,详情参考官方文档
- 生产环境文件.env.production
VUE_APP_BASE_PATH=/app/
- 测试环境文件.env.development
VUE_APP_BASE_PATH=/
新建vue.config.js
详情请参考官方文档
module.exports = {
#这里通过.env文件创建
publicPath:process.env.VUE_APP_BASE_PATH,
#这里可以修改为任意目录,用来保存build出来的项目文件
outputDir: 'D:\\nginx\\html\\app'
}
修改route.js
详情参考官方文档
export default new Router({
#引用.env文件中配置的参数
base: process.env.VUE_APP_BASE_PATH,
#改为history
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})
修改nginx.conf
尽量把根目录(/)的配置在最后,已防产生其他影响
server {
listen 8090;
#访问 /app/ ,配置开始
location /app {
root D:/nginx/html/;
index index.html index.htm;
try_files $uri $uri/ @fallback;
}
location @fallback {
# 请注意路径(/app/index.html)
rewrite ^(.+)$ /app/index.html last;
}
#访问 /app/ ,配置结束
#访问 / ,配置开始
location / {
root D:/nginx/html/page/;
index index.html index.htm;
try_files $uri $uri/ @rewrites;
}
location @rewrites {
rewrite ^(.+)$ /index.html last;
}
#访问 / ,配置结束
}