vue-router懒加载

最新推荐文章于 2025-10-12 20:19:43 发布

原创最新推荐文章于 2025-10-12 20:19:43 发布 · 515 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-router #懒加载 #vue

vue 专栏收录该内容

29 篇文章

订阅专栏

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

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异步组件添加各个状态组件