vue 在nginx下頁面刷新出現404問題解決和在nginx下頁面加載了js但是頁面顯示空白問題解決

一、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就是配置文件里的一個全局變量，也是項目路徑

（只作為自己的記錄，有需要的人做為參考）