Vue 实现懒加载

最新推荐文章于 2025-05-09 23:28:10 发布

原创最新推荐文章于 2025-05-09 23:28:10 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

vue 实现懒加载，需要两个步骤：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/film/FilmList'
import FilmDetail from '@/components/film/FilmDetail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/navCinema',
      name: 'CinemaList',
      component: resolve => {require(['../components/cinema/CinemaList.vue'], resolve)}
    },
    {
      path: '/Film_detail',
      name: 'FilmDetail',
      component:FilmDetail
    }
  ],mode: 'history'
})

首先就是路由的配置，用require的方式引入。

其次，要查看 webpack.base.conf.js 配置文件里面的配置 chunkFilename 的配置有没有。如果没有需要添加此参数

output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  chunkFilename:'chunks/[name]-[chunkhash:8].js',
  publicPath: process.env.NODE_ENV === 'production'
    ? config.build.assetsPublicPath
    : config.dev.assetsPublicPath
},