Vue-router+webpack单页项目服务器部署(nginx)

部署项目目录结构如下:

1.首先修改config文件夹下的index.js 配置文件,将文件内的assetsPublicPath: '/'修改为 assetsPublicPath: './'

2.在router文件夹下的index.js路由配置中加上:
mode: 'history', // 路由模式,此处为history模式,需修改nginx配置文件
base: '/',　// 路由基目录

3.命令行执行npm run build 生成布署文件,并将文件上传到服务器

4.修改nginx的配置文件(mode为history模式)
根据官方文档nginx只需在nginx.conf配置文件里加入　try_files $uri $uri/ /index.html;重启服务器即可。

我的nginx配置文件如下：

项目访问主页面:

项目访问子页面: