问题描述

vue-cli 改的多页项目，本地开发的时候一切正常，打包也没有报错。但访问的时候，有的页面可以正常访问有的页面空白并且控制台报错 Uncaught TypeError: Cannot read property 'call' of undefined，查看 network 里资源都已经成功加载，如下图：

解决办法

修改 webpack.prod.conf.js 文件，见下图：

这个问题是我同事帮忙找到的，原因是 js 加载的顺序问题，后来我查了这个插件 html-webpack-plugin 里面有两个配置选项：

chunks :

chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。
chunks 默认会在生成的 html 文件中引用所有的 js 文件，当然你也可以指定引入哪些特定的文件。

chunksSortMode :

这个选项决定了 script 标签的引用顺序。选项：’none’ | ‘auto’ | ‘dependency’ |’manual’ | {function}’
1. none : 不排序
2. auto : 基于chunks的id进行排序
3. dependency : 按照不同文件的依赖关系排序
4. function : 可以指定具体排序规则

没有找到关于 manual 选项的含义，manual 有‘手工的’意思，经过测试我猜应该是手动排序的意思，即按照 chunks 配置中指定的顺序。如下：

修改 chunks 的顺序：
chunks: [pathname, 'vendor', 'manifest']
chunks: ['vendor', 'manifest', pathname]

报错
Uncaught ReferenceError: webpackJsonp is not undefined
Uncaught TypeError: Cannot read property 'call' of undefined

参考：

webpack之html-webpack-plugin插件
我的WebPack入门（二）——html-webpack-plugin
html-webpack-plugin用法全解