一、vue 在nginx下页面刷新出现404
在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是没有表达完整,可能会让比较急于解决这个问题的人简单复制却始终解决不了问题
nginx正确的配置:
1、如果是在根目录则配置如下
location / {
root /;
index index.html;
try_files $uri $uri/ /index.html
}
2.如果是有特定目录
location /xx/xx/ {
root /;
index index.html;
try_files $uri $uri/ /xx/xx/index.html
}
附上官方vue-router的说明:https://router.vuejs.org/zh-cn/essentials/history-mode.html
二、vue打包后发布在nginx下,页面加载了js但是页面显示空白
这个问题是因为在配置router的时候没有带上自己的项目的目录,在配置router那里加上项目路径就可以了
1.直接写在router上
如果直接是根目录就将/xx/xxx改成/
export default new Router({
mode: 'history', base: '/xx/xxx', routes: [ { path: '/', name: 'Login', component: signIn } ]})
2.写成全局变量在配置文件里,以便发布
export default new Router({
mode: 'history', base:env.base_build_path,
routes: [ { path: '/', name: 'Login', component: signIn } ]})
注:这个env.base_build_path就是配置文件里的一个全局变量,也是项目路径(只作为自己的记录,有需要的人做为参考)
来源:https://www.cnblogs.com/huangc/p/8252471.html