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

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

  • [1. 路由空白的原因分析](#1. 路由空白的原因分析)
    • [1.1 路由模式设置问题](#1.1 路由模式设置问题)
    • [1.2 base 设置问题](#1.2 base 设置问题)
    • [1.3 路由中组件的动态导入方式](#1.3 路由中组件的动态导入方式)

第一次使用 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设置问题

javascript 复制代码
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 路由中组件的动态导入方式

参考链接

  • 错误方式
javascript 复制代码
 let routes = [{
      path: '/index',
       component: import('@/components/index'),
       name: 'index'
  },]
  • 正确方式
javascript 复制代码
 let routes = [{
      path: '/index',
       component: () => import('@/components/index'),
       name: 'index'
  },]

ps: import('@/components/index') 与 () => import('@/components/index') 加载方式有很大区别!

相关推荐
li35747 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj7 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel8 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel8 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
^Rocky8 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
西陵9 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld9 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
笑鸿的学习笔记9 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
东风西巷11 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求