关于#vue#的问题，如何解决？(标签-html|关键词-view)

Question

vue3项目 使用路由懒加载后访问项目会在访问完所有文件才运行，不是应为prefetch，打包后的html文件内包含所有的文件

链接

我使用的是() =>import(@/views/HomeView.vue)进行的懒加载

Answer 1

该回答引用ChatGPT
感谢您的提问！

您的问题描述中提到，在使用路由懒加载后，访问项目会在访问完所有文件才运行，不是应为prefetch，打包后的HTML文件内包含所有的文件。

这可能是由于项目中的路由懒加载配置不正确导致的。路由懒加载应该是在需要路由对应的组件时才去加载，而不是在访问项目时就加载全部路由对应的组件。

以下是一个正确配置路由懒加载的例子：

import { createRouter, createWebHistory } from 'vue-router'

const HomeView = () => import('@/views/HomeView.vue')
const AboutView = () => import('@/views/AboutView.vue')
const ContactView = () => import('@/views/ContactView.vue')

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: AboutView
  },
  {
    path: '/contact',
    name: 'contact',
    component: ContactView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

如上代码所示，路由对应的组件使用函数返回，而非直接引入组件，这样就实现了符合路由懒加载的配置。另外，需要确保 Webpack 配置文件（如 vue.config.js 文件）中没有对路由懒加载进行过额外的配置。

如果您已经按照上述方式配置路由懒加载，但仍然无法正常使用，则可能是其他配置或代码存在问题，您需要进行进一步排查。