nginx部署vue history

事情是这样的，一开始本地开发使用hash模式，后来改为history模式，部署到线上一看???, App。vue渲染了，router-view没渲染？什么鬼？

看了下vue-router配置

const router = new VueRouter({
  base:'/haiwai/aa/temp/',
  mode:'history',
  routes,
});

在看下nginx配置

location /haiwai/aa/temp {
	root html/;
	try_files $uri $uri/ /haiwai/aa/temp/index.html;
}

再看下vue.config.js配置

publicPath:  "./",

好像不太行，官方文档也提及到了，在使用history api时避免使用相对路径

修改一下vue.config.js

publicPath: "/haiwai/aa/temp/"

重新部署一下，nice啊，正常展示了

使用history模式总结

1. 将路由base修改为nginx路径保持一致
2. vue.config.js的publicpath也保持一致
3. 修改nginx配置如下，注意路径与nginx目录保持一致，root: html/;也是必须的，重点！！

location /haiwai/aa/temp {
	root html/; 
	try_files $uri $uri/ /haiwai/aa/temp/index.html;
}