vue3 + vite2 vue 打包后router-view空白

第一次使用 vite 打包项目，被这个问题搞了大半天，心态有点崩！不过解决完后还是非常开心！

1. 路由空白的原因分析

1.1 路由模式设置问题

• Hash模式的工作原理如下：

  • 当用户点击页面上的导航菜单时，使用JavaScript代码来更改URL的hash。

  • 当URL的hash部分发生变化时，浏览器会自动触发hashchange事件。开发者可以通过监听 * hashchange事件来捕获URL变化的通知，并根据新的hash值执行相应的操作，如更新页面内容或进行状态管理。

  • 通过hashchange事件的监听，可以实现单页应用（Single Page Application，SPA）中不同页面视图的切换，而无需重新加载整个页面。这是因为只有URL的hash部分发生变化，浏览器并不会向服务器发送新的请求。

  • 对于hash模式下的URL，浏览器并不会向服务器请求相应的资源。因此，当首次加载网页时，只需请求一个HTML页面，并在该页面中引入JavaScript和CSS等资源。

• History模式的工作原理如下:

  • 通过History API，可以在不导致页面重新加载的情况下，动态地修改浏览器的URL。这意味着，当用户访问新的路径时，浏览器不会向服务器请求新的页面，而只是通过JavaScript代码来更新页面内容。

  • 当用户在网站中浏览不同页面或执行特定操作时，通过调用History API中的方法（如pushState()或replaceState()），可以修改URL的路径部分，从而反映当前页面状态和导航历史。

  • 使用History模式的应用程序通常会预定义一组路由（routes），将URL的路径与特定的页面或视图关联起来。通过监听浏览器的popstate事件，可以捕获URL的变化，并根据新的路径值执行相应的操作。

  • 当用户通过浏览器的前进或后退按钮导航时，也会触发popstate事件。开发者可以在事件处理程序中获取新的路径值，并根据路径值来更新页面内容，以保持URL和应用程序状态同步。

  • 对于History模式下的URL，当用户直接访问特定路径时，浏览器会向服务器发送请求以获取相应的页面。因此，服务器需要进行相应的配置，以确保在各个路径下都返回正确的页面。

• vue-router设置问题

const route = new createRouter({
  mode: "hash",
   // history:createWebHashHistory(import.meta.env.VITE_RES_URL),
   history: createWebHashHistory(import.meta.env.VITE_RES_URL),
   routes
})
export default route; 

1.2 base 设置问题

1.3 路由中组件的动态导入方式

参考链接

• 错误方式

 let routes = [{
      path: '/index',
       component: import('@/components/index'),
       name: 'index'
  },]

• 正确方式

 let routes = [{
      path: '/index',
       component: () => import('@/components/index'),
       name: 'index'
  },]

ps： import(‘@/components/index’) 与 () => import(‘@/components/index’) 加载方式有很大区别！