webpack打包成功后页面报错如下，该如何解决

最新推荐文章于 2024-02-26 11:43:14 发布
最新推荐文章于 2024-02-26 11:43:14 发布
阅读量608 收藏
点赞数
分类专栏： webpack踩过的坑 个人笔记 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rpf1234/article/details/103258380
版权

错误如下
在这里插入图片描述
解决办法，webpack配置文件加上如下代码即可

resolve:{
	alias:{
    	'vue':path.join(__dirname,'../node_modules/vue/dist/vue.esm.js')
    }
},

将以上代码放置在output后即可

rpf1234
关注
专栏目录
新员工webpack打包后上传服务器页面空白
前端程序员、项目经理、人工智能博主
10-31 457
某天同事小白使用了开发vue项目，在项目开发完成后，使用命令：npm run build对项目进行打包后发布服务器页面显示空白排查后发现：webpack打包的时候引入js时使用的是绝对路径导致的。
0706学习日志：webpack打包简单的js项目超详细步骤（包含报错解决）
opoqou的博客
07-06 1575
webpack打包简单的js项目超详细步骤（包含报错解决）
webpack报错大全
lscheng的博客
10-30 956
本人在学习的时候遇到的一些问题及解决方法在此记录一下并且分享给大家。如有错误欢迎评论指正！ 文章目录一、Automatic publicPath is not supported in this browser问题1、起因2、解决方法二、Cannot find module 'webpack-cli/bin/config-yargs问题1、起因2、解决方法 一、Automatic publicPath is not supported in this browser问题 1、起因 最近在学习webpack之
vue2项目使用webpack-obfuscator报错
努力小张 https://nice_995.gitee.io/blog || https://skye-iiii.github.io/Blog/
05-25 4370
vue2项目使用webpack-obfuscator报错 Cannot read property 'sourceAndMap" of undefined
Webpack打包后报错问题解决办法
心若向阳，无谓悲伤的博客
01-08 3670
最近使用Vue+WebPack进行项目开发，在完成开发后，执行npm run build生成dist文件后，打开index.html，界面一直未加载成功，通过console窗口看到所有资源文件都在报404错误。 意思很显然是路径不对，但是检查过后，感觉路径也没有大的错误，后来发现只要其实是一个特别不起眼的错误导致的。 这个是引入文件的路径地址，看起来是不是感觉没什么问题，其实是少了一个...
前端代码混淆webpack-obfuscator插件使用问题
qq_43498878的博客
01-04 1228
使用打包后代码混淆（当时使用的webpack-obfuscator插件），使用Jekins清除工作空间后，重新install报错，
webpack-obfuscator, web service的javascript混淆插件插件.zip
09-17
webpack-obfuscator, web service的javascript混淆插件插件 web service的 javascript混淆插件插件 安装使用NPM安装软件包并将它的添加到你的devDependencies:npm install --save-dev webpack-obfuscator用法：
webpack打包后直接访问页面图片路径错误的解决方法
08-30
Webpack打包后直接访问页面图片路径错误的解决方法 Webpack是一款功能强大的打包工具，但是在使用时经常会遇到一些问题。其中一个常见的问题就是在Webpack打包后直接访问页面图片路径错误。这种错误会导致图片无法...
vue+webpack 打包文件 404 页面空白的解决方法
11-30
综上所述，解决Vue+Webpack打包后404页面空白的问题，主要涉及到服务器配置（如Nginx的try_files规则）、静态资源路径设置（通过Vue CLI的`publicPath`）以及Babel的正确配置（`.babelrc`文件）。通过调整这些配置，...
html图片路径报错,如何解决webpack打包后直接访问页面图片路径错误
weixin_36255898的博客
06-05 718
这篇文章主要给大家介绍了在webpack打包后直接访问页面图片路径错误的解决方法，文中介绍的非常详细，对遇到这个问题的朋友们具有一定的参考学习价值，需要的朋友们下面来一起看看吧。前言本文说的这种图片路径错误是这样的，运行webpack-dev-server，一切正常，没有错误。当webpack之后，直接打开index页面，报错，图片找不到，找不到的原因是路径错误。先看我的项目代码webpack.c...
webpack入门学习以及踩坑记录
2301_76272533的博客
07-26 193
这是我入门学习webpack之后整理的一些学习笔记和踩的一些坑记录下来，如有不对的地方或者需改善的地方，欢迎大家批评指正！
解决webpack-obfuscator混淆报错 Cannot read property ‘sourceAndMap‘ of undefined
a123456234的博客
02-26 1441
解决webpack-obfuscator混淆报错 Cannot read property 'sourceAndMap' of undefined
解决webpack在vue2中打包出现错误，超出打包文件大小限制的问题
weixin_67140738的博客
08-08 722
【代码】解决webpack在vue2中打包出现错误，超出打包文件大小限制的问题。
js代码混淆 webpack-obfuscator
热门推荐
潇蓝诺依的博客
01-18 2万+
{ compact: true,//压缩,无换行 controlFlowFlattening: false,//是否启用控制流扁平化(降低1.5倍的运行速度) controlFlowFlatteningThreshold: 0.75,//应用概率;在较大的代码库中，建议降低此值，因为大量的控制流转换可能会增加代码的大小并降低代码的速度。 deadCodeInject...
webpack-obfuscator运行报错
sinat_39059988的博客
06-01 3151
webpack 版本：3.6.0 webpack-obfuscator版本：0.28.4 build时报错： building for production...F:\0du\code\Code-JavaScript\VUE\immovableculturalrelic\vue-src\node_modules\webpack-obfuscator\dist\index.js:22 compiler.hooks.emit.tap(pluginName, (compilation).
代码加密混淆插件webpack-obfuscator
乌龙茶不甜的博客
07-14 1万+
背景 公司代码提供给第三方使用，为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。 安装 npm install --save-dev webpack-obfuscator 配置 // webpack.config.js const JavaScriptObfuscator = require('webpack-obfus
webpack打包时报错的解决方法记录
asfcyg的博客
04-23 1506
在通过VS code运行webpack进行打包时报错，因为在此系统上禁止运行脚本。 解决方法： 1. 先以管理员身份运行VS code 2. 执行get-ExecutionPolicy，显示Restricted，表示状态是禁止的 3. 执行set-ExecutionPolicy RemoteSigned，表示将状态改为RemoteSigned 4. 再次执行get-ExecutionPolicy，...
webpack打包时丢失个别背景图片
lemon_bubbly的博客
04-10 1330
build/utils.js文件夹下添加红框内的语句 原因：图片过大，没有转换成 base64 码引用
vue安装compression-webpack-plugin后打包报错
最新发布
08-28
在Vue项目中安装`compression-webpack-plugin`插件后，可能会遇到打包时报错的情况。`compression-webpack-plugin`是一个用于压缩Webpack构建产出的静态资源（如CSS、JS）的插件，但在添加它之前需要确认几个步骤： 1. **兼容性检查**：确保你的webpack版本支持该插件，因为某些版本可能存在不兼容。 2. **正确配置**：在你的webpack配置文件(`config/index.js` 或 `vue.config.js`) 中，你需要正确地应用这个插件。通常会把它添加到output部分，并设置合适的压缩选项，例如`algorithm`, `test`等。 ```js const CompressionWebpackPlugin = require('compression-webpack-plugin'); module.exports = { //... optimization: { minimizer: [ new CompressionWebpackPlugin({ algorithm: 'gzip', // 压缩算法，默认为gzip test: /\.js$|\.html$|\.css$/, // 指定要压缩的文件类型 threshold: 10240, // 文件大小阈值，低于此值时不压缩 minRatio: 0.8, // 压缩比率低于此值时不压缩 }), ], }, }; ``` 3. **处理错误**：如果打包过程中报错，可能是由于其他依赖冲突、语法错误或者是配置文件解析问题。检查是否有语法错误，以及是否有其他模块与`compression-webpack-plugin`有冲突。 如果你已经按照上述步骤操作但仍出现问题，具体的错误信息将是非常重要的线索。常见的错误可能包括缺少必要的模块、路径问题或是对webpack的配置理解有误。建议你在错误日志中查找关键词，或者尝试在网上搜索相似错误以找到解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值