Vue打包报错

微风粼粼

已于 2024-07-30 10:39:03 修改

阅读量306

点赞数 6

文章标签： vue.js 前端 javascript

于 2024-07-24 17:34:03 首次发布

本文链接：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