Vue 部署單頁應用，刷新頁面 404/502 報錯

在 Vue 項目中，能夠選擇 hash或者 history.pushState() 實現路由跳轉。若是在路由中使用history模式：

export default new Router({
  mode: 'history',

  base: __dirname,
  scrollBehavior,
  routes: [index, blog, project, about, list]
})

那麼，當咱們 npm run build 完成並部署到服務器後，刷新某個路由下的頁面，會出現 404 或者 502 錯誤。

這是由於刷新頁面時訪問的資源在服務端找不到，由於vue-router設置的路徑不是真實存在的路徑。

解決方法

簡單配置下 nginx ，讓全部路由（url）下的頁面重寫到 index.html便可：

server {
        listen 80;
        server_name www.fayinme.cn;

        gzip on;
        gzip_min_length 1k;
        gzip_buffers 4 16k;
        gzip_comp_level 2;
        gzip_vary off;
        gzip_disabled "MSIE [1-6]";
        autoindex on;

        root /www/blogfront/production/current;
        index index.html;
        
        location / {
                try_files $uri $uri/ @router;
                index index.html;
        }

        location @router {
                rewrite ^.*$ /index.html last;
        }

注意

配置完成後，若是刷新任意頁面（F5）都跳轉到首頁，你須要查看下 app.vue 是否包含了以下代碼：

created() {
    this.$router.push('/')
  }

若是有，註釋或刪除便可。