开发完vue项目后,使用vueRouter 的history模式,直接在nginx上部署访问时页面无法正常显示,总结以下两种使用场景
场景1部署在根目录
// vue.config.js 配置
publicPath:'/'
// router.js 配置
base:'/',
mode:'history'
nginx 设置
location ^~ /{
// root webapp/app; 根路径下面root和alias都可以
alias webapp/app;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
场景2部署在非根目录
// vue.config.js 配置
publicPath:'/app'
// router.js 配置
base:'/app',
mode:'history'
nginx 设置
location ^~ /app{
// root webapp/app; 如果是root会报错,改用alias
alias webapp/app;
index index.html index.htm;
try_files $uri $uri/ /app/index.html;
}