Vue 项目打包后访问报错：Uncaught TypeError: Cannot read property 'call' of undefined

问题描述

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

解决办法

修改 webpack.prod.conf.js 文件如下:

chunks: ['manifest', 'vendor', pathname],
chunksSortMode: 'manual',

如图:

原因是 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

正确的是:

chunks: ['manifest', 'vendor', pathname],
chunksSortMode: 'manual',

参考：

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