鍍金池/ 問答/HTML/ 關(guān)于vue-router路由懶加載 “將某個(gè)路由下的所有組件都打包在同個(gè)異步塊

關(guān)于vue-router路由懶加載 “將某個(gè)路由下的所有組件都打包在同個(gè)異步塊 (chunk) 中”的問題

1.通過vue-route的官方文檔鏈接描述

懶加載：const Foo = () => import(/ webpackChunkName: "group-foo" / './Foo.vue')

按照上面的例子

import Vue from 'vue'
import Router from 'vue-router'
const Category = () => import(/* webpackChunkName: "category" */'../components/category.vue')
const Recommend = () => import(/* webpackChunkName: "category" */'../page/recommend.vue')
通過webpack打出來的包里面沒有category.js文件
const HotTopics = () => import('../page/hotTopics.vue')
const Detail = () => import('../page/detail/Category_Movie.vue')
const NotFound = () => import('../page/notFound.vue')

clipboard.png

打包出來的js并沒有category.js

回答
編輯回答
夏夕

import(/ webpackChunkName: "category" /'../components/category.vue') 這個(gè)會(huì)被打包成 0.[hash] 或者 1.[hash] 類似這樣的js中， 你可以查看這些打包好的js，就能明白了

2018年7月18日 13:02
編輯回答
兔囡囡

在webpack.prod.conf文件里面新增

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].asyncChunk.js')  // 配合懶加載打包重命名 }
2017年10月30日 23:54
編輯回答
凹凸曼

目測是output chunkFilename 寫出問題來了

2018年6月28日 17:24