vue-cli2.x线上刷新页面空白问题以及项目配置基础路径 base

在vue-cli 2.x项目中路由为 history 模式时，打包部署到nginx服务器上后页面刷新空白的问题。我遇到过nginx服务器的根目录和子目录下部署页面刷新空白的情况，在这里做一下记录。

一：部署到nginx服务器根目录下

1. 找到config/index.js文件的build模块把 assetsPublicPath改为 ‘/’：

build:{
	index: path.resolve(__dirname, '../dist/index.html'), 
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsPublicPath: '/'
}

2. 然后对 nginx 服务器的配置 try_files 修改：

server {
    listen 80;
    server_name localhost;
    location /web {
        try_files $uri $uri/ /index.html; //指向index.html
    }
}

二：部署到nginx服务器根目录下的一个子目录

1. 找到config/index.js文件里面的build模块：

build:{
	index: path.resolve(__dirname, '../dist/index.html'), 
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsPublicPath: '/test/', //这里改成你的二级目录
}

2. 在路由文件添加基础路径 base 配置：base 默认是根目录 ‘/’
   

3. 最后对nginx的配置 try_files 修改：

server {
    listen 80;
    server_name localhost;
    location /web {
        try_files $uri $uri/ /test/index.html; //这里加上二级目录
    }
}

友情链接：vue-cli3.x 基础路径配置