vue【opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ]】 @TOC一、Vue项目启动报错如下> front@0.1.0 serve > vue-cli-service serve Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating INFO Starting development server... 10% building 2/5 modules 3 active ...rontsHospital\front\node_modules\eslint-loader\index.js??ref--14-0!D:\Vue\front\src\main.js E rror: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:68:19) at Object.createHash (node:crypto:138:10) at module.exports (D:\Vue\front\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (D:\Vue\front\node_modules\webpack\lib\NormalModule.js:417:16) at handleParseError (D:\Vue\front\node_modules\webpack\lib\NormalModule.js:471:10) at D:\Vue\front\node_modules\webpack\lib\NormalModule.js:503:5 at D:\Vue\front\node_modules\webpack\lib\NormalModule.js:358:12 at D:\Vue\front\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (D:\Vue\front\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at iterateNormalLoaders (D:\Vue\front\node_modules\loader-runner\lib\LoaderRunner.js:221:10) at D:\Vue\front\node_modules\loader-runner\lib\LoaderRunner.js:236:3 at runSyncOrAsync (D:\Vue\front\node_modules\loader-runner\lib\LoaderRunner.js:130:11) at iterateNormalLoaders (D:\Vue\front\node_modules\loader-runner\lib\LoaderRunner.js:232:2) at Array.<anonymous> (D:\Vue\front\node_modules\loader-runner\lib\LoaderRunner.js:205:4) at Storage.finished (D:\Vue\front\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16) at D:\Vue\front\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9 node:internal/crypto/hash:68 this[kHandle] = new _Hash(algorithm, xofLen); ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:68:19) at Object.createHash (node:crypto:138:10) at module.exports (D:\Vue\front\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (D:\Vue\front\node_modules\webpack\lib\NormalModule.js:417:16) at handleParseError (D:\Vue\front\node_modules\webpack\lib\NormalModule.js:471:10) at D:\Vue\front\node_modules\webpack\lib\NormalModule.js:503:5 at D:\Vue\front\node_modules\webpack\lib\NormalModule.js:358:12 at D:\Vue\front\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (D:\Vue\front\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at Array.<anonymous> (D:\Vue\front\node_modules\loader-runner\lib\LoaderRunner.js:205:4) at D:\Vue\front\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9 at D:\Vue\front\node_modules\graceful-fs\graceful-fs.js:123:16 at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', Node.js v20.11.0解决方式1：NodeJS版本过高解决方式2：添加项目启动参数在npm run serve项目启动前声明条件变量//windows $env:NODE_OPTIONS="--openssl-legacy-provider" npm run serve //Linux NODE_OPTIONS=--openssl-legacy-provider npm run servePS D:\Vue\front> $env:NODE_OPTIONS="--openssl-legacy-provider" PS D:\Vue\front> npm run serve DONE Compiled successfully in 12694ms 15:30:15 App running at: - Local: http://localhost:8080/ - Network: http://192.168.1.10:8080/ Note that the development build is not optimized. To create a production build, run npm run build. endl

vue循环指令el-table-column展示图片src路径拼接 在Vue中，使用el-table-column展示图片时，可以通过拼接图片路径来设置src属性。这里提供一个简单的例子： <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column label="图标" width="180"> <template slot-scope="scope"> <img :src="getImageUrl(scope.row.icon)" alt="图标" /> </template> </el-table-column> <!-- 其他列 --> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2016-05-02', icon: 'image1' }, { date: '2016-05-04', icon: 'image2' }, // 其他数据... ], baseImagePath: 'path/to/your/images/' // 图片的基础路径 }; }, methods: { getImageUrl(icon) { return `${this.baseImagePath}${icon}.png`; // 拼接图片路径 } } }; </script>