在vue-cli 2.x项目中路由为 history 模式时,打包部署到nginx服务器上后页面刷新空白的问题。我遇到过nginx服务器的根目录和子目录下部署页面刷新空白的情况,在这里做一下记录。
一:部署到nginx服务器根目录下
- 找到config/index.js文件的build模块把 assetsPublicPath改为 ‘/’:
build:{
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsPublicPath: '/'
}
- 然后对 nginx 服务器的配置 try_files 修改:
server {
listen 80;
server_name localhost;
location /web {
try_files $uri $uri/ /index.html; //指向index.html
}
}
二:部署到nginx服务器根目录下的一个子目录
- 找到config/index.js文件里面的build模块:
build:{
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsPublicPath: '/test/', //这里改成你的二级目录
}
-
在路由文件添加基础路径 base 配置:base 默认是根目录 ‘/’
-
最后对nginx的配置 try_files 修改:
server {
listen 80;
server_name localhost;
location /web {
try_files $uri $uri/ /test/index.html; //这里加上二级目录
}
}
友情链接:vue-cli3.x 基础路径配置