vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js可是页面显示空白问题解决

1、vue 在nginx下页面刷新出现404

  在网上翻遍了全部这样问题的解决办法，全都是一个解决办法也是正确的解决办法，（后来在vue官网上关于history方式出现404解决方法也是这样说的），只是没有表达完整，可能会让比较急于解决这个问题的人简单复制却始终解决不了问题

nginx正确的配置：

一、若是是在根目录则配置以下

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

 

2、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就是配置文件里的一个全局变量，也是项目路径（只做为本身的记录，有须要的人作为参考）