vue-router懒加载

最新推荐文章于 2025-06-02 09:03:48 发布

Beamon__

最新推荐文章于 2025-06-02 09:03:48 发布

阅读量498

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue-router 懒加载 vue

本文链接：https://blog.youkuaiyun.com/Beamon__/article/details/90442759

vue 专栏收录该内容

29 篇文章

订阅专栏

博客介绍了Vue路由懒加载的配置方法。一是在创建路由的配置文件中，把原始引入组件的方式改为异步引入；二是修改webpack的output配置，如修改build/webpack.base.conf.js，还提到了vue异步组件添加各个状态组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在创建路由的配置文件中改变引入组件的方式，将原始引入方式改为异步引入

// 原始引入方式
import Home from "@pages/home";


// 异步引入方式
const Home = () => import('@/pages/home');

2.修改webpack的output配置

修改 build/webpack.base.conf.js

// 添加chunkFilename: '[name].js',如下所示
output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  chunkFilename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
    ? config.build.assetsPublicPath
    : config.dev.assetsPublicPath
},

ps: vue异步组件添加各个状态组件