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用法全解

爱编程
  • 版权声明 本文源自 __Amy 整理 发表于 2021-01-1610:53:58
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: