vue 3.0用history路由 二级目录404

vue 3.0用history路由 二级目录404

基于vue 3.0用history路由打包后出现空白页面
当使用二级目录后 二级目录404

如： https://example.com/example 但我们是单页面应用 也有自己的路由地址 https://example.com/example/home 结果访问404

  {
    path: '/home',
    name: 'home',
    component: () => import('../views/home/index.vue'),
  }

解决方案：

1. 修改路由配置

createWebHistory() 值为base
源码：

export declare function createWebHistory(base?: string): RouterHistory;

 const router = createRouter({
  history: createWebHistory(isProduction ?'/example/' : ''),
  routes,
});

2. 修改nginx配置信息：

当我们的路由使用history模式访问时，需对配置进行修改

 location /example/ {
   index  index.html;
   try_files $uri $uri/ /example/index.html; #重要，vue项目解决刷新后404问题，配置项为重试查找别的文件，具体配置请自行百度"nginx try_files"
   alias /xxx/xxx/example;
  }

这样就可以访问：https://example.com/example/home了：亲测有效