webpack打包vue报错

最新推荐文章于 2024-04-17 14:34:47 发布
原创 最新推荐文章于 2024-04-17 14:34:47 发布 · 338 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #vue

本文详细介绍了在使用Vue进行项目开发时遇到的两个常见Webpack错误：'Cannot read property 'range' of null' 和 'error static/js/vendor.fd5e525e.js from UglifyJs undefined' 的具体原因及解决办法。对于第一个错误，通过调整.eslintrc文件中的规则设置，关闭某些可能引起冲突的检查项；对于第二个错误，通过升级uglifyjs-webpack-plugin插件到Beta版本来解决。

问题一
Cannot read property ‘range’ of null
错误行的代码
component: () => import(’…/xxxx,vue’),

解决办法
修改.eslintrc，加入

  rules : {
    "template-curly-spacing" : "off",
    "indent" : "off"
  }

问题二
error
static/js/vendor.fd5e525e.js from UglifyJs
undefined

解决办法

npm i -D uglifyjs-webpack-plugin@beta
webpack3提取vue css,详解webpack打包vue时提取css
weixin_34177886的博客
08-04 798
详解webpack打包vue时提取csswebpack打包vue项目的时候默认会把vue里的css打包到页面上。webpack.config.js里的plugins加上以下配置new webpack.LoaderOptionsPlugin({test:/\.vue$/,options: {vue: {loaders: {css: ExtractTextPlugin.extract({fallbac...
webpack打包css报错（已解决）：UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function
qq_45914170的博客
01-07 4651
UnhandledPromiseRejectionWarning错误解决 今天在学习codewhy老师的webpack课程时，安装webpack的loader时，报了下面这些错误 (node:13936) UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function at Object.loader (D:\桌面\前端代码\vue\webpack\learnWebpack-01\webpack的配置\no
使用webpack打包使用Vue，报错：[Vue warn]: Cannot find element: #app
Sumbo_Z的博客
05-26 728
解决方式： 1.查看 #app不能是#App; 2.检查index.html 引入的bundle.js是否在后面，如果在head引用会出现此错误。 我遇到的时候，搜了很多看，这两个是我出现的问题，希望能帮助到你们。 如果想要解释原因，可以留言哦。 ...
webpack打包vue项目异常汇总
chenmei8988的博客
09-03 236
1、打包后静态资源路径引用错误 解决方法：修改config/index.js 文件中的 build 对象的assetsPublicPath 属性 build: { assetsPublicPath: './' } 2、字体文件等路径引用错误 解决方法：在 b...
vue小结和webpack的报错
weixin_46340162的博客
01-10 574
vue小结和webpack的报错
一个菜鸟用webpack-vue.js编译过程碰到的坑~~！！
weixin_30530523的博客
04-21 291
webpack+vue自动化编译的坑还是很多的。 先介绍下Eslint 我不是来教Eslint，点我 正题： 第一坑： 把main.js文件中的注释我全给删了（处女座，洁癖~） 编译报错上图 继续上图 这段注释不可删~！！！切记！！ 这段注释不可删~！！！切记！！ 这段注释不可删~！！！切记！！ 第二坑： 代码结束留一行~！！！代码结束留一行~！！！代码结...
vue-router 按需加载 component: () => import() 报错的解决
10-14
主要介绍了vue-router 按需加载 component: () => import() 报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue-cli webpack打包开启Gzip 报错问题
10-16
本文将详细介绍如何解决Vue-cli中Webpack打包开启Gzip功能时遇到的报错问题。 ### Vue-cli和Webpack基础 Vue-cli是一个基于Vue.js进行快速开发的完整系统，提供了一套统一的配置标准，旨在帮助开发者快速搭建Vue...
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
10-14
总结来说，当遇到`uglifyjs-webpack-plugin`打包Vue项目时的ES6语法错误，应检查项目中是否存在未转换的ES6代码，特别是`node_modules`下的依赖。通过`transpileDependencies`配置，可以确保这些依赖在打包过程中被...
vue 启动报错：TypeError: Cannot read property ‘range‘ of null
qq_41999034的博客
10-14 1万+
错误： vue项目启动时，报错：TypeError: Cannot read property ‘range’ of null 原因： babel-lint版本过高问题导致。 高版本插件一般容易出错，最稳妥的方法就是降低本地插件版本，使用稳定版就行开发 解决方法： 方法1： 这是在网上看到的方法，不过在我本地测了无效，或许你们可以尝试一下： 关闭项目，在本地打开项目文件，将node_modules文件夹删除； 重新在编辑器打开项目，使用 npm install重新安装依赖包。 启动项目。 方法2： 本人就是
针对使用eslint，阻止报错的一些常见注解
jaisojio的博客
08-24 1982
以上大概是会遇到的一些 eslint 不必要的校验，此方式是在配置 eslint 时的不成熟的做法，下面给大家一个关于 eslint 的一个比较全面的校验规则，在下面如果没有包含到上述的规则，可以将上述的规则添加到下述规则中。配置 eslint 的规则需要在 .eslintrc.js 文件的 rules 配置项中进行。前提：在写项目时，eslint 会报一些不必要的错误影响项目的运行。
vsCode实现eslint,Prettier格式化（next.js框架）
qq_38359639的博客
03-28 1661
执行npm install --save-dev eslint-config-prettier 在应用商店下载Prettier插件 设置vscode配置文件settings.json { "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } } 配置.eslintrc.json规则文件，复制下面内容 { "extends": [ // eslint 自带拓展校验 "
【Vue3】项目打包提示错误：At least one ＜template＞ or ＜script＞ is required in a single file component.
九七的博客
04-17 1万+
【代码】【Vue3】项目打包提示错误：At least one or is required in a single file component.
Vue中通过配置eslintrc.js文件来解决编译时出现的no-trailing-spaces、no-undef等错误
sxj的专栏
10-30 1万+
错误信息： D:\work\vue\workbench\src\views\login\index.vue 12:10 warning 'Options' is defined but never used @typescript-eslint/no-unused-vars 14:1 error '$' is not defined no-undef 14:16 error Trailing spaces not allowed
vscode保存代码，自动按照eslint规范格式化代码设置
Handsome2013的博客
05-22 709
转载自：https://www.cnblogs.com/moshuying/p/11329930.html vscode保存代码，自动按照eslint规范格式化代码设置 编辑器代码风格一致，是前端代码规范的一部分。同一个项目，或者同一个小组，保持代码风格一致很必要。就拿vue项目来说，之前做的几个项目，很多小伙伴代码格式化用的是vue-beautify ,这个格式化工具有个明显的缺点，就是三元不等式明明可以一行显示，非得格式化成3行，import用{}引入多个变量或者函数，非得格式化成好几行，看起来很
关于vue项目运行时报错 failed (from ./node_modules/eslint-loader/index.js)
QueenLee1的博客
04-27 5312
vue项目时,通常使用eslint进行代码检测,但是不知道你们有没有遇到过这样的问题: 就一直报Cannot read property ‘range’ of null , 于是就在网上找解决的办法 , 我试过好多种办法 , 什么是不是eslint版本有问题啊 , 把node_modules 卸载重新安装… 然而并没有什么用… 终于 , 经过不懈努力 , 找到了解决的办法 在根目录的.eslin...
关于Vue - Webpack 项目打包出现的一些问题
热门推荐
lensgcx的博客
11-03 3万+
关于Vue - Webpack 项目打包出现的一些问题
webpack打包vue文件报错：ERROR in ./src/App.vue 1:0 Module parse failed: Unexpected token (1:0) You may need
小王_同学的博客
04-10 1万+
webpack默认不能处理vue文件，只能自己添加额外的插件进行处理 解决报错如下： 安装两个拓展插件 npm i vue-loader vue-template-compiler -D 然后在webpack.config.js添加如下配置： module: { rules: [ { test:/\.vue$/, loader: 'vue-loader...
webpack中引入vue组件（.vue文件）时打包报错的解决办法
qq_41672008的博客
04-10 5947
如图的错误： 一片红，但是要仔细看出现了什么错误，其中vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.这一句很关键！！ 错误中提示缺少了一个插件，webpack config中缺少名为 VueLoaderP...
vue3 webpack项目控制台报错不准确
最新发布
07-09
在 Vue3 Webpack 项目中，如果控制台显示的错误信息不准确，通常是由于源映射（Source Map）未正确生成或配置导致的。为了解决这个问题，需要调整 Webpack 的 `devtool` 配置选项，并确保相关 loader 和插件的设置能够支持更精确的调试信息。 ### 配置 devtool Webpack 提供了 `devtool` 配置项来控制是否生成 source map 以及其生成方式。为了获得更准确的错误信息，可以将 `devtool` 设置为 `'source-map'` 或 `'eval-source-map'`： ```javascript module.exports = { // 其他配置... devtool: 'source-map', // 或 eval-source-map }; ``` - **`'source-map'`**：生成独立的 `.map` 文件，适合生产环境使用，提供最精确的调试体验。 - **`'eval-source-map'`**：将 source map 作为 data URL 内联到打包后的文件中，适合开发环境，首次构建速度较慢，但后续更新较快[^1]。 ### 配置 Babel Loader 如果你使用了 Babel 来转译 JavaScript 或 TypeScript 文件，确保 `babel-loader` 的配置也启用了 source map 支持： ```javascript { test: /\.js$/, loader: 'babel-loader', options: { sourceMap: true, // 确保启用 source map }, } ``` 对于 Vue 单文件组件，还需要安装并配置 `vue-loader` 和 `@vue/compiler-sfc`，以确保模板和样式能够被正确处理，并保留调试信息： ```bash npm install vue-loader @vue/compiler-sfc -D ``` 然后在 Webpack 配置中添加相应的规则： ```javascript const { VueLoaderPlugin } = require('vue-loader'); module.exports = { // ... module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, ], }, plugins: [ new VueLoaderPlugin(), ], }; ``` ### 检查 HTML 插件配置 如果你使用了 `html-webpack-plugin` 来自动生成 HTML 文件，请确保其配置不会影响脚本的加载顺序或干扰 source map 的工作流程。通常默认配置即可满足需求： ```javascript new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'public/index.html'), }); ``` ### 使用 Source Map 插件增强调试能力 某些情况下，你可能需要额外的工具来优化 source map 的生成与调试体验。例如，`source-map-dev-tool-plugin` 可用于更细粒度地控制 source map 的生成方式： ```javascript const webpack = require('webpack'); module.exports = { // ... plugins: [ new webpack.SourceMapDevToolPlugin({ filename: '[file].map', // 输出的 source map 文件名 exclude: ['vendor.js'], // 排除某些文件 }), ], }; ``` ### 浏览器开发者工具设置 最后，检查浏览器的开发者工具是否启用了 source map 显示功能。在 Chrome DevTools 中，打开“Sources”面板，确认左侧的源代码树中包含了原始的 `.vue` 或 `.js` 文件路径，而不是仅显示打包后的文件名。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冰风漫天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值