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;
        }