vue history路由模式 部署Nginx

1、設定 路由模式為 history

2、新增base （非常重要，否則首頁載入白屏），路徑是相對於域名對映的路徑

3、修改Nginx配置

 

export default new Router({
  mode: 'history',    //設定mode
  base:'/web/bjsubway/', //設定base
  routes: [
    {
      path: '/',
      redirect: '/map'
    },
    {
      path: '/notice',
      name: 'notice',
      component: () => import('../pages/notice.vue'),
      meta: {
        title: '詳情'
      },
    },
    ...routes
  ]
});

 

修改Nginx （擷取到帶有/web/bjsubway的請求，try_files 在硬碟中查詢index.html檔案）

location 是 url訪問的地址 如：https://apics.ruubypay.com/web/bjsubway

alias 是你專案在伺服器部署的真實地址

try_files 是相對於域名對映目錄的地址

 location /web/bjsubway {
            alias /root/www/bjsubway;
            try_files $uri $uri/ /web/bjsubway/index.html;
        }