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配置文件如下：



项目访问主页面:



项目访问子页面: