关于vue-router路由懒加载 “将某个路由下的所有组件都打包在同个异步块 (chunk) 中”的问题

Question

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')

打包出来的js并没有category.js

Answer 1

在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')  // 配合懒加载打包重命名 }

Answer 2

import(/ webpackChunkName: "category" /'../components/category.vue') 这个会被打包成 0.[hash] 或者 1.[hash] 类似这样的js中， 你可以查看这些打包好的js，就能明白了

Answer 3

目测是output chunkFilename 写出问题来了