Vue结合webpack实现路由懒加载和分类打包

Vue项目中路由设置一般会引入组件，然后使用。但是这会造成项目一次加载很多组件，影响响应时间。解决这个问题就可以使用路由的懒加载。有三种方法可以实现：

export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component:r=>require.ensure([],()=>r(require('@/components/HelloWorld')),'HelloWorld') // 1. // component:()=>import('@/components/HelloWorld'/*webpackChunkName: "helloworld2"*/) // 2. // component:resolve=>require(['@/components/HelloWorld'],resolve) // 3. } ]})

在router/index.js中是这样修改的，但是还是不够的，我们还需要配置build的文件

在build/webpack.prod.conf.js中还需要修改chunkFilename和publicPath

output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') chunkFilename:utils.assetsPath('js/[name]-[chunkhash:8].js'), publicPath:'./' // 如果打包后出现文件引入报错问题一般都是这个 },

打包之后的文件树是这样的

阅读更多