网站建设捌金手指花总二八优化大师使用方法

前提

        我的项目是vue2+node14搭建的，现根据公司要求需要升级node至20以上。

        实际上，只要本地node切换到20版本，并且能正常运行起来就没什么问题。

        我使用了最简单粗暴的方法，直接切换到20版本，然后npm run dev，看有什么报错，可能会出现依赖包版本过低，或者依赖包不兼容node的问题。这样的话有什么问题就修复什么问题。

切换至node高版本并运行

nvm use 20
npm run dev

出现以下问题：

问题1： this[kHandle] = new _Hash

        该问题是因为 Node.js v20.12.0 使用了 OpenSSL 3.0，而某些模块或代码尝试使用了 OpenSSL 3.0 不再支持的算法或密钥大小。

        解决办法很多可以自行搜索，这里我选择了以下方法，使用跨平台的环境变量设置：

安装soncross-env：

npm install cross-env --save-dev

修改 package.json 中的脚本：

原
"scripts": {"build": "webpack --config build/webpack.prod.config.js"
}更新
"scripts": {"build": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config build/webpack.prod.config.js"
}

        再次npm run dev运行

问题2：node-sass版本不兼容当前node版本

        由于node-sass已经不再被维护，所以推荐使用sass来代替node-sass。

1. 卸载node-sass

npm uninstall node-sass

2. 安装sass

npm install sass

3. 检查项目中使用node-sass的地方并替换为sass，如webpack配置中：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const path = require('path');
const sass = require('sass'); // 引入 sassmodule.exports = {entry: `./src/main.js`,output: {filename: '[name].[hash:7].js',path: path.resolve(__dirname, 'dist'),},module: {rules: [{test: /\.js$/,use: 'babel-loader',exclude: /node_modules/,},{test: /\.vue$/,use: 'vue-loader',exclude: /node_modules/,},{test: /\.(eot|woff|woff2?|ttf|svg|png|jpe?g|gif)$/,use: [{loader: 'url-loader',options: {name: '[name]-[hash:5].min.[ext]',limit: 1000000,esModule: false},},],},{test: /\.(scss|css)$/,use: ['vue-style-loader','css-loader',{loader: 'sass-loader',options: {implementation: sass, // 指定使用 dart-sass},},],},],},resolve: {extensions: ['.js', '.vue', '.json'],alias: {'@': path.join(__dirname, '../src'),},},plugins: [new CleanWebpackPlugin(),new VueLoaderPlugin()],
};

具体修改内容有：

引入 sass：

        在文件顶部添加了 const sass = require('sass');，以确保可以使用 sass。

 const sass = require('sass');

修改 sass-loader 的配置：

        在 rules 中，针对 scss 或 css 文件的处理规则中，将 sass-loader 的配置修改为：

{loader: 'sass-loader',options: {implementation: sass, // 指定使用 dart-sass},
}

        再次npm run dev，可成功运行。

更新package依赖

        也可以将项目里老的依赖包都升级下，我没做，可参考：

node版本升级，项目如果适配，并更新依赖_node 升级-CSDN博客