用webpack打包却提示ERROR in js/index.js from Terser Error: error:0308010C:digital envelope routines::unsupported，怎么解决

时间: 2023-11-07 09:06:53 浏览: 233

解决vue+webpack打包路径的问题

最近写了一个vue小项目，不想单独作为一个web项目发布，所以就准备放到资源项目的public文件夹下，遇到一些小问题，在此总结一下。资源路径如下： public目录配置的访问路径为”/”，在这样的情况下，我们的访问路径就变成了”域名/vue-demo”。访问的时候发下程序未报错，但是页面一片空白。此前也这样发布的项目都没有问题，但这次是怎么回事呢？仔细探索后发现是vue-router搞得鬼。因项目需要，所以使用了滚动行为，滚动行为必须开启history模式，在vue-router官方文档中有这么一句话：当你使用 history 模式时，URL 就像正常的 url，例如 http:/ 在开发Vue.js应用程序时，经常会使用Webpack作为模块打包器，以构建优化的前端代码。然而，在将项目打包并部署到特定目录，如本例中的`public`文件夹下时，可能会遇到路径问题。这里的问题主要涉及到Vue Router的`history`模式和Webpack的`publicPath`配置。 Vue Router提供了两种导航模式：`hash`模式和`history`模式。默认情况下，Vue Router使用`hash`模式，其URL结构类似`http://example.com/#/some/path`，其中`#`后的部分是路由信息。`hash`模式的优点是无需服务器配置即可正常工作，因为`#`符号后面的路由信息不会被发送到服务器。然而，`history`模式则提供了一种更友好的URL形式，如`http://example.com/some/path`。这种方式更接近传统的Web应用，但同时也引入了新的挑战。当使用`history`模式时，浏览器会尝试从服务器获取匹配URL的资源，如果没有找到对应的服务器资源，就会返回404错误。为了避免这种情况，需要服务器配置一个“ catch-all ”路由，使得所有未匹配的请求都返回`index.html`，以便Vue应用能接管并处理这些路由。在本例中，Vue应用被放置在`public/vue-demo`下，因此Vue Router的配置需要相应调整。你需要修改Vue Router的路由定义，确保所有路径都以`/vue-demo`开头，例如： ```javascript const routes = [ { path: '/vue-demo/home', component: Home }, { path: '/vue-demo/about', component: About }, // 更多路由... ]; ``` 同时，Webpack的配置也需要更新。Webpack打包时，它会基于`publicPath`设置来生成引用资源的URL。为了让资源文件（如CSS、JS）能够正确加载，你需要将`publicPath`设置为`/vue-demo/`，这样Webpack才会在生成的HTML文件中插入带有所需前缀的引用： ```javascript // webpack.config.js module.exports = { // ... output: { publicPath: '/vue-demo/', // 添加或修改这一行 filename: '[name].[contenthash].js', assetModuleFilename: 'assets/[name][ext][query]', // ... }, // ... }; ``` 完成上述步骤后，Vue应用应该能够在`/vue-demo`路径下正常工作，且所有资源都能正确加载。请记住，这些更改可能需要根据你的具体服务器环境进行调整。如果你的服务器是Express.js，可以添加以下中间件来处理“ catch-all ”路由： ```javascript // server.js const express = require('express'); const path = require('path'); const app = express(); const port = process.env.PORT || 3000; app.use(express.static(path.join(__dirname, 'public'))); app.get('*', (req, res) => { res.sendFile(path.resolve(__dirname, 'public', 'index.html')); }); app.listen(port, () => { console.log(`Server is running on port ${port}`); }); ``` 这段代码将确保所有未找到的静态资源请求都返回`public/index.html`，从而允许Vue应用在`history`模式下正常运行。解决Vue+Webpack打包路径问题的关键在于理解Vue Router的`history`模式和Webpack的`publicPath`配置，以及如何适配服务器以支持这种模式。正确配置后，你就可以在自定义的路径下顺利部署和运行Vue应用了。

在使用webpack打包时，如果出现ERROR in js/index.js from Terser Error: error:0308010C:digital envelope routines::unsupported的错误，有几个解决办法可以尝试： 1. 确保你的node.js版本是最新的，并且更新webpack和相关的插件到最新版本。有时候这个错误是由于旧版本的webpack或其他依赖项引起的。 2. 尝试使用其他的压缩工具替代Terser。你可以在webpack配置文件中指定其他的压缩工具，如UglifyJS等。 3. 通过在命令行中设置环境变量来解决问题。尝试执行以下命令： ``` set NODE_OPTIONS=--openssl-legacy-provider ``` 这个命令会在打包过程中使用旧版的openssl加密算法，可能会解决该错误。 4. 如果上述方法都无效，你可以尝试降低node.js的版本。根据你提供的引用中的解决办法，降低node.js版本可能是解决这个问题的一种方法。但需要注意的是，这可能会导致其他问题，因此请谨慎操作。如果以上方法都没有解决你的问题，请提供更多关于你的项目和打包配置的信息，以便更准确地定位和解决问题。

阅读全文

用webpack打包却提示ERROR in js/index.js from Terser Error: error:0308010C:digital envelope routines::unsupported，怎么解决

相关推荐

webpack3里使用uglifyjs压缩js时打包报错的解决

webpack打包js的方法

Building for production...Error: error:0308010C:digital envelope routines::unsupported

js/chunk-vendors.46c48e48.js from Terser Error: error:0308010C:digital envelope routines::unsupported

node_modules\webpack\hot\dev-server.jsError: error:0308010C:digital envelope routines::unsupported

D:\RuoYi-Vue-master\ruoyi-ui\node_modules\webpack\hot\dev-server.jsError: error:0308010C:digital envelope routines::unsupported

Error: error:0308010C:digital envelope routines::unsupported

npm run docs:build报错Error: error:0308010C:digital envelope routines::unsupported 是为什么

webpack打包时报错Error: error:0308010C:digital envelope routines::unsupported

Building for staging...Error: error:0308010C:digital envelope routines::unsupported

webpack报错Error: error:0308010C:digital envelope routines::unsupported

vue打包提示“Error: error:0308010C:digital envelope routines::unsupported”

若依启动报错95% emitting CompressionPlugin ERROR Error: error:0308010C:digital envelope routines::unsupported

最新推荐

Origin教程009所需练习数据

大模型的稀疏激活方法及其高效推理应用研究：基于dReLU激活函数

STM32F103+PWM+DMA精准控制输出脉冲的数量和频率 源程序

RStudio中集成Connections包以优化数据库连接管理

管理建模和仿真的文件

Keil uVision5全面精通指南

flink提交给yarn19个全量同步MYsqlCDC的作业，flink的配置参数怎样设置

PHP博客旅游的探索之旅

"互动学习：行动中的多样性与论文攻读经历"

【单片机编程实战】：掌握流水灯与音乐盒同步控制的高级技巧

STM32F103+PWM+DMA精准控制输出脉冲的数量和频率源程序