Vue 实现懒加载

来源：互联网发布：网络聊天室编辑：程序博客网时间：2024/06/05 12:39

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},

0 0