Vue打包报错

已于 2024-07-30 10:39:03 修改
阅读量432 收藏 5
点赞数 6
文章标签： vue.js 前端 javascript
于 2024-07-24 17:34:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itkidkid/article/details/140667129
版权

1、问题

最近前端打包的时候遇到了一个问题，在终端使用npm run build命令，报错

PS D:\company_project> npm run build

        > VueAdmin@0.1.0 build
        > vue-cli-service build


        |  Building for production...

        ERROR  Failed to compile with 41 errors                                                                                                                                                                                    15:48:44

        error

        js/app.js from Terser
        Error: error:0308010C:digital envelope routines::unsupported
        at new Hash (node:internal/crypto/hash:79:19)
        at Object.createHash (node:crypto:139:10)
        at PS D:\company_project\node_modules\terser-webpack-plugin\dist\index.js:217:37
        at Array.forEach (<anonymous>)
        at TerserPlugin.optimizeFn (D:company_project\node_modules\terser-webpack-plugin\dist\index.js:160:259)
        at AsyncSeriesHook.eval [as callAsync] (eval at create (D:company_project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:7:1)
        at AsyncSeriesHook.lazyCompileHook (D:company_project\node_modules\tapable\lib\Hook.js:154:20)
        at D:company_project\node_modules\webpack\lib\Compilation.js:1409:36
        at AsyncSeriesHook.eval [as callAsync] (eval at create (D:company_project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook (D:company_project\node_modules\tapable\lib\Hook.js:154:20)
        at D:company_project\node_modules\webpack\lib\Compilation.js:1405:32
        at AsyncSeriesHook.eval [as callAsync] (eval at create (D:company_project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
        at AsyncSeriesHook.lazyCompileHook (D:company_project\node_modules\tapable\lib\Hook.js:154:20)
        at Compilation.seal (D:company_project\node_modules\webpack\lib\Compilation.js:1342:27)
        at D:company_project\node_modules\webpack\lib\Compiler.js:675:18
        at D:company_project\node_modules\webpack\lib\Compilation.js:1261:4
        at AsyncSeriesHook.eval [as callAsync] (eval at create (D:company_project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
        at AsyncSeriesHook.lazyCompileHook (D:company_project\node_modules\tapable\lib\Hook.js:154:20)
        at Compilation.finish (D:company_project\node_modules\webpack\lib\Compilation.js:1253:28)
        at D:company_project\node_modules\webpack\lib\Compiler.js:672:17
        at _done (eval at create (D:company_project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
        at eval (eval at create (D:company_project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:32:22)
        at D:company_project\node_modules\webpack\lib\Compilation.js:1185:12
        at D:company_project\node_modules\webpack\lib\Compilation.js:1097:9
        at process.processTicksAndRejections (node:internal/process/task_queues:77:11)

        error

二、原因

通过网上查找资料定位到是node.js版本的问题，我的node.js的版本是v20.15.0
这个错误主要是由于 Node.js 17 及其后续版本中默认启用了 OpenSSL 3.0，而某些依赖于 Webpack 的包还没有适配这个更高版本的 OpenSSL。因此，在构建 Vue 项目时会遇到这种错误。
在网上找解决方案就是降级node.js版本，不过降低版本可能会引发一系列的问题，所以在网上找了一种更简便的方法

三、解决

1. 通过命令提示符（CMD）

打开命令提示符（CMD），然后输入以下命令来设置环境变量（注意：这种方法只对当前CMD窗口有效，关闭后设置将失效）

set NODE_OPTIONS=--openssl-legacy-provider

2. 通过PowerShell

可以通过设置环境变量来绕过 OpenSSL 3.0 的问题。具体操作是，在执行构建命令之前，设置NODE_OPTIONS 环境变量。
在终端命令行中输入$env:NODE_OPTIONS = “–openssl-legacy-provider”，回车（同样，这种方法也是临时的，只对当前PowerShell会话有效。）

$env:NODE_OPTIONS = "--openssl-legacy-provider"

3. 系统属性中的环境变量（永久设置）

如果你希望这个设置对所有用户或当前用户永久有效，可以通过系统属性来设置环境变量：

右击“此电脑”（或“我的电脑”）图标，选择“属性”。
点击“高级系统设置”。(命令提示符窗口，快捷命令：sysdm.cpl)
在“系统属性”窗口中，点击“环境变量”按钮。
在“系统变量”或“用户变量”区域中，找到并点击“新建”来创建一个新的环境变量，或者选择已存在的NODE_OPTIONS变量并编辑它。
或者打开命令提示符界面输入sysdm.cpl打开系统属性 --》选择高级 --》环境变量 --》用户变量
设置变量名为NODE_OPTIONS，变量值为--openssl-legacy-provider。
点击“确定”保存设置。

在这里插入图片描述

4.再次输入构建命令npm run build（注意仍然是在项目目录下输入）

PS D:\company_project> npm run build                                  

> VueAdmin@0.1.0 build
> vue-cli-service build


\  Building for production...

 WARNING  Compiled with 3 warnings                                                                                                                                                                                          16:33:13

 warning  in ./src/views/order/Refund.vue?vue&type=script&lang=js

"export 'GET_DESCRIPTION' was not found in '@/config'

 warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  js/chunk-8f3454e0.js (304 KiB)
  js/chunk-vendors.js (1.84 MiB)

 warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (2.09 MiB)
      css/chunk-vendors.css
      js/chunk-vendors.js
      css/app.css
      js/app.js


  File                                                          Size                                                                             Gzipped

  dist\js\chunk-vendors.js                                      1883.21 KiB                                                                      597.34 KiB
  dist\js\chunk-8f3454e0.js                                     303.95 KiB                                                                       92.27 KiB
  dist\js\chunk-681b6bad.js                                     234.83 KiB                                                                       53.17 KiB
  dist\js\chunk-cc25aad2.js                                     169.41 KiB                                                                       41.27 KiB
  dist\js\chunk-22026c69.js                                     58.46 KiB                                                                        16.50 KiB
  dist\js\chunk-cc282f6e.js                                     46.63 KiB                                                                        11.36 KiB
  dist\js\chunk-4f4f8093.js                                     44.60 KiB                                                                        8.53 KiB
  dist\js\chunk-36852b68.js                                     23.79 KiB                                                                        7.54 KiB
  dist\js\chunk-29436fca.js                                     23.68 KiB                                                                        6.63 KiB
  dist\js\chunk-498fa9e4.js                                     23.21 KiB                                                                        5.19 KiB
  dist\js\app.js                                                22.75 KiB                                                                        7.42 KiB
  dist\js\chunk-bf22e800.js                                     22.23 KiB                                                                        5.05 KiB
  dist\js\chunk-5263c678.js                                     22.06 KiB                                                                        6.01 KiB
  dist\js\chunk-5a9f5718.js                                     20.07 KiB                                                                        5.81 KiB
  dist\js\chunk-1c3f80eb.js                                     20.00 KiB                                                                        5.86 KiB
  dist\js\chunk-128206fe.js                                     18.90 KiB                                                                        5.72 KiB
  dist\js\chunk-3d175d6c.js                                     18.17 KiB                                                                        5.76 KiB
  dist\js\chunk-7442d346.js                                     18.04 KiB                                                                        5.95 KiB
  dist\js\chunk-42c59780.js                                     17.61 KiB                                                                        5.49 KiB
  dist\js\chunk-695c5822.js                                     16.80 KiB                                                                        5.00 KiB
  dist\js\chunk-4138ef9e.js                                     16.47 KiB                                                                        5.30 KiB
  dist\js\chunk-4a51850e.js                                     16.25 KiB                                                                        3.77 KiB
  dist\js\chunk-3442d4d5.js                                     15.86 KiB                                                                        5.07 KiB
  dist\js\chunk-588d5afe.js                                     15.74 KiB                                                                        5.05 KiB
  dist\js\chunk-be2f9c58.js                                     15.10 KiB                                                                        3.65 KiB
  dist\js\chunk-e036ae66.js                                     14.83 KiB                                                                        4.65 KiB
  dist\js\chunk-51d632f4.js                                     14.03 KiB                                                                        4.43 KiB
  dist\js\chunk-0957da1a.js                                     11.01 KiB                                                                        3.12 KiB
  dist\precache-manifest.797a1e50e253b2b4deb30364b75e3499.js    7.69 KiB                                                                         1.63 KiB
  dist\js\chunk-4263c2e4.js                                     6.69 KiB                                                                         2.22 KiB
  dist\js\chunk-e76e1c46.js                                     6.47 KiB                                                                         2.18 KiB
  dist\js\chunk-1b073ffc.js                                     6.38 KiB                                                                         2.15 KiB
  dist\js\chunk-30f757a4.js                                     5.89 KiB                                                                         2.41 KiB
  dist\js\chunk-bcaeca18.js                                     5.10 KiB                                                                         2.11 KiB
  dist\js\chunk-7308b9ea.js                                     4.71 KiB                                                                         1.85 KiB
  dist\js\chunk-11553fd4.js                                     4.59 KiB                                                                         1.64 KiB
  dist\js\chunk-5e114a65.js                                     3.89 KiB                                                                         1.55 KiB
  dist\js\chunk-550efd34.js                                     3.59 KiB                                                                         1.70 KiB
  dist\js\chunk-04758cfc.js                                     2.96 KiB                                                                         1.08 KiB
  dist\js\chunk-63993b84.js                                     1.09 KiB                                                                         0.59 KiB
  dist\service-worker.js                                        1.04 KiB                                                                         0.61 KiB
  dist\js\chunk-ba9a746a.js                                     0.91 KiB                                                                         0.52 KiB
  dist\js\chunk-f167b484.js                                     0.91 KiB                                                                         0.52 KiB
  dist\css\chunk-vendors.css                                    235.75 KiB                                                                       35.78 KiB
  dist\css\chunk-30f757a4.css                                   36.72 KiB                                                                        4.80 KiB
  dist\css\chunk-51d632f4.css                                   4.28 KiB                                                                         1.25 KiB
  dist\css\iconfont.css                                         4.01 KiB                                                                         2.73 KiB
  dist\css\chunk-8f3454e0.css                                   2.29 KiB                                                                         0.75 KiB
  dist\css\app.css                                              1.86 KiB                                                                         0.78 KiB
  dist\css\chunk-4f4f8093.css                                   1.58 KiB                                                                         0.51 KiB
  dist\css\chunk-22026c69.css                                   0.85 KiB                                                                         0.30 KiB
  dist\css\chunk-498fa9e4.css                                   0.80 KiB                                                                         0.33 KiB
  dist\css\chunk-bf22e800.css                                   0.75 KiB                                                                         0.31 KiB
  dist\css\chunk-ba9a746a.css                                   0.71 KiB                                                                         0.32 KiB
  dist\css\chunk-550efd34.css                                   0.70 KiB                                                                         0.31 KiB
  dist\css\chunk-f167b484.css                                   0.69 KiB                                                                         0.30 KiB
  dist\css\chunk-7442d346.css                                   0.63 KiB                                                                         0.27 KiB
  dist\css\chunk-29436fca.css                                   0.50 KiB                                                                         0.25 KiB
  dist\css\chunk-5263c678.css                                   0.50 KiB                                                                         0.25 KiB
  dist\css\chunk-5a9f5718.css                                   0.50 KiB                                                                         0.25 KiB
  dist\css\chunk-4a51850e.css                                   0.49 KiB                                                                         0.25 KiB
  dist\css\chunk-128206fe.css                                   0.46 KiB                                                                         0.23 KiB
  dist\css\chunk-5e114a65.css                                   0.40 KiB                                                                         0.18 KiB
  dist\css\chunk-7308b9ea.css                                   0.40 KiB                                                                         0.18 KiB
  dist\css\chunk-36852b68.css                                   0.36 KiB                                                                         0.15 KiB
  dist\css\chunk-be2f9c58.css                                   0.27 KiB                                                                         0.15 KiB
  dist\css\chunk-695c5822.css                                   0.25 KiB                                                                         0.16 KiB
  dist\css\chunk-e036ae66.css                                   0.25 KiB                                                                         0.16 KiB
  dist\css\chunk-63993b84.css                                   0.16 KiB                                                                         0.12 KiB
  dist\css\chunk-0957da1a.css                                   0.11 KiB                                                                         0.10 KiB
  dist\css\chunk-1c3f80eb.css                                   0.09 KiB                                                                         0.08 KiB
  dist\css\chunk-11553fd4.css                                   0.08 KiB                                                                         0.09 KiB
  dist\css\chunk-bcaeca18.css                                   0.07 KiB                                                                         0.08 KiB
  dist\css\chunk-4138ef9e.css                                   0.06 KiB                                                                         0.08 KiB
  dist\css\chunk-42c59780.css                                   0.06 KiB                                                                         0.08 KiB
  dist\css\chunk-4263c2e4.css                                   0.05 KiB                                                                         0.07 KiB
  dist\css\chunk-e76e1c46.css                                   0.05 KiB                                                                         0.07 KiB
  dist\css\chunk-04758cfc.css                                   0.04 KiB                                                                         0.06 KiB
  dist\css\chunk-3442d4d5.css                                   0.04 KiB                                                                         0.06 KiB
  dist\css\chunk-588d5afe.css                                   0.04 KiB                                                                         0.06 KiB
  dist\css\chunk-1b073ffc.css                                   0.03 KiB                                                                         0.05 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

打包成功。

微风粼粼
关注
Vue 路由打包报错的原因和解决方法
DevGlider的博客
09-21 806
在 Vue.js 中，路由是一个非常重要的功能，它允许我们在单页面应用程序中进行页面导航和组件切换。然而，有时在打包 Vue 项目时，可能会遇到一些与路由相关的错误。当打包 Vue 项目时，如果遇到路由相关的错误，首先应该检查路由配置是否正确，依赖项是否安装和配置正确，以及版本是否兼容。在 Vue 路由中，我们需要正确配置路由表，以确保每个路由都能正确映射到对应的组件。有时，打包错误可能是由于缺少相关的依赖项或插件引起的。在你的项目中，可以尝试升级或降级 Vue 路由的版本，以与其他依赖项保持兼容。
解决vue打包报错Unexpected token name «t», expected punc «；» 和Unexpected token: punc (,)的问题
前端程序员、项目经理、人工智能博主
10-31 2332
老项目之前打包一直没有问题，且此次项目启动运行依然正常，但打包报了上述错误，因此肯定跟打包配置有关，且与UglifyJs有关，于是百度了一下，找到了如下解决方案，且成功解决了我的问题。
VUE打包时报错
qq_38998337的博客
06-25 2165
自定义目录标题) VUE打包时报错 一直以来还没遇到解决不了的问题,然而今天遇到一个很头疼的问题,求助各位大佬!!! 问题来源: 使用了网上找来的一个emoji组件,不是通过npm install安装的插件,就是一个文件夹,直接拉到了项目中使用. 效果如下: 问题: 打包时UglifyJS报错了 undefined??? 难道这里不应该是错误信息的描述吗?所以无从下手啊,网上也没找到解决办法...
vue3打包疯狂报错
最新发布
雨果的博客
09-30 489
打包的时候报错很多Cannot find name ‘xxx‘。但是npm run dev 是运行正常的。package.json中的vue-tsc --noEmit 删掉就可以了。
vue打包报错
weixin_46147856的博客
08-16 308
vue打包报错 Error processing file: static/css/app.93cd1677f3eada87a6665629aade6316.css 检查过后发现是 一个文件中的标签写成了</br/> 改过后打包成功
vue项目能正常启动但是打包报错
qq_44428688的博客
01-22 1597
这个错怎么说呢 一般是不会发生的 发生这个错误的原因也非常的抽象 是手误的原因。public文件夹下的index.html文件 问题就出在这里 解析东西 插入东西发生了失败。能正常的跑应该是浏览器或者跑的那个服务有个校准或者忽略的功能 但是打包的确没有。图上是页面注意看框起来的 不小心删了一个结束标签 引发了这一系列的错误 补上就能解决这个报错。项目执行npm run serve/dev的图一点影响没有 跑起来之后页面也非常的正常。然后就来到了打包环境 执行打包命令。
vue打包报错Maximum call stack size exceeded
03-31
当你在使用Vue进行打包时，如果出现"Maximum call stack size exceeded"的错误，通常是由于代码中存在无限递归调用导致的。这种情况下，程序会一直调用同一个函数，直到达到JavaScript引擎的最大调用栈大小限制。 ...
vue打包报错ReferenceError: process is not defined
07-13
当你在Vue项目中遇到"ReferenceError: process is not defined"的错误时，这通常发生在尝试在浏览器环境中访问Node.js特有的`process`对象。`process`对象主要用于操作系统交互和环境信息获取，在浏览器环境下并不...
Vue打包报错Unexpected token: punc(()解决方案
weixin_34310785的博客
03-27 3599
（用vscode）vue项目打包时，报错，报错信息如下： ERROR in static/js/0.564c764efc3ecf31190c.js from UglifyJs Unexpected token: punc (() [App.vue?4b081dc6:15,0][static/js/0.564c764efc3ecf31190c.js:89,9] ERROR in sta...
vue 项目打包 报错
Sunshine_Jian的博客
10-26 5916
再执行 npm run build 之后，会生成一个dist文件夹，打开index.html，控制台报错 如下图所示： 这里是因为找不到正确的路径，导致报错。 解决办法： 1、在根目录下，新建vue.config.js文件，当然有的话，就忽略此条； 2、在vue.config.js里 将publicPath: "/" 改为publicPath: "./" ，之后重新打包，npm run build 即可。 publicPath: "/" =====>&gt...
vue打包npm run build时候界面报错的解决
11-20
用coding-pages打开后显示Failed to load resource: the server responded with a status of 404 (Not Found)， 解决方案： 方案一： 找到config里的index.js,打开修改assetsPublicPath 为“./” 方案二： 或者把index.html文件中的路径/去掉； 下面是去掉后的，可以参考下 成功了！ 补充知识：启动vue项目 npm run dev 时报errno -4058 进入到项目目录下，shift+右键 打开cmd 执行 npm install 然后再执行 npm ru
vue项目打包发布出现的报错
呆子小木心的博客
06-23 6850
vue项目打包发布出现的报错
vue 打包失败
今天bug有点多
03-18 821
兢兢业业敲完了代码，搬完了砖，最后发现，瓦特？不能打包了？！！！这不是砸我饭碗儿嘛？！ 首先我们来看看问题 起初以为是依赖的问题，于是删除了依赖，清除了一下缓存，重新安装了一遍 npm cache clean --forc 后继续继续打包，毫不意外的，依旧不行，非常棒的一个结果 八嘎！！！你成功的吸引了我的注意 于是开始面向百度编程，后发现 知识点来了！！！ 敲黑板！！！ 【原来是 UglifyJs 当前的版本不支持es6的写法，其中一种解决的办法就是升级更新 UglifyJs 的版
vue项目打包失败问题记录
小混子得得的博客
11-25 9196
"vue": "^2.7.14"项目不知名原因打包失败
vue打包的时候报错
weixin_41547161的博客
04-18 294
optimize-css-assets-webpack-plugin版本的问题，我之前的版本是5x后来降到3x,打包就能正常运行了，
vue运行 打包报错
web_zq的博客
02-19 1303
vue 运行的时候报警告 打包的时候报错 运行的时候报这个警告，再次执行npm install 也无法解决 执行npm run dev 的时候报错 打包的时候报很多红色错误 解决办法： 怀疑是依赖下载的不行，多次执行npm i 和cnpm i 都解决不了问题，然后 手动把 node_modules删除后，重新执行npm i 把问题解决了 没有报错 也没有警告 能正常运行，能打...
vue 打包失败 This is probably not a problem with npm. There is likely additional logging output above
newpeople007的博客
09-15 450
npm run build 打包报错
vue打包后报错问题
weixin_44387746的博客
08-10 711
在vue.config.vue中添加 publicPath: './', outputDir: 'dist', assetsDir: 'static', 在路由index.js中添加 模式为 hash 模式 const router = createRouter({ mode:"hash", history: createWebHistory(process.env.BASE_URL), routes })
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值