本文目录一览:
- 1、vue打包后报错TypeError: Cannot read property ‘call’ of undefined解决方法 - 2021-09-18
- 2、vue打包后发布文件路径错误且报错Unexpected token
- 3、记录vue项目打包后报错exports is not defined
vue打包后报错TypeError: Cannot read property ‘call’ of undefined解决方法 - 2021-09-18
在webpack构建打包vue项目后,上传到服务器页面报错提示 TypeError: Cannot read property 'call' of undefined
一般大多数出现这类问题都是在vue多页应用、vue路由页面等打包后出现报错,当然了如果你是其它情况引起的一样可以尝试我下面给出的解决方案
引起这个原因的问题是 extract-text-webpack-plugin 配置问题,比如出问题是这样配置的:
那么我们改成这样,主要是加了allChunks参数
vue打包后发布文件路径错误且报错Unexpected token
项目执行npm run dev和npm run build-dev(开发环境打包)都没有问题
当使用npm run build-prod(生产环境)打包,发布之后查看报错:
此处所采用的的是vue-cli2.x
1.修改文件config/index.js,修改build配置中的内容
如上修改后打包可以打开不在报错,但是找不到图片以及文字了
2.修改build/utils.js文件,修改publicPath
重新打包后,访问正常
用过与该项目相同的脚手架,搭建了两个项目,然而另外的项目却没有该问题,暂未发现问题所在。
本项目Nginx配置中存在前置web-pmms
最终还原了上方的三处修改,将config/index.js中assetsPublicPath做如下修改
assetsPublicPath是配置为相对路径还是绝对路径,取决于你打包后前端资源怎么发布部署
vue-cli2.x版本
情况1: 如果应用配置在一个域名的根路径上,例如,则直接配置assetsPublicPath:'/';
情况2: 如果应用配置在一个域名的子路径上,例如 ,则应设置assetsPublicPath:'/myapp/';
这个值也可以设置为空字符串('')或相对路径('./'),这样所有资源都会被链接为相对路径,这样打包后的文件可以被部署在任意路径。
vue-cli3.x版本
需要在vue.config.js 添加baseUrl:‘xxx’
vue-cli 4.x版本
需要在 vue.config.js 中修改 publicPath:'xxx'
记录vue项目打包后报错exports is not defined
发现不同环境变量下有时候打包正常有时候报错
经排查 发现报错的打包的控制台会报如下错误,但是构建正常,没有报红
[BABEL] Note: The code generator has deoptimised the styling of /root/.jenkins/workspace/prod-funeral-affair-front-business-pc/node_modules/element-ui/lib/element-ui.common.js as it exceeds the max of 500KB-vue打包好的文件浏览报错
解决方法:
在项目的根目录下找到 .babelrc 文件,增加 "compact": false ,如:
{
"compact": false,
"presets": ["env", "react", "stage-0"],
"plugins": [
"transform-runtime"
]
}
如果不存在则手动创建该文件,并填写内容如:
{
"compact": false
}