Vue打包Node版本升级实战-入门到放弃到成功

Node环境

PS C:\Users\Administrator\Desktop> node -v
v16.13.2

Node版本问题

该项目是两三年前的vue2项目，当初创建项目是用的node-v10 版本，现在本机的node版本是v16,所以在执行npm install的时候提示如下错误：

npm ERR! code 1
npm ERR! path D:\devProjectCode\vueCode\xxxxx\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: D:\devToolInstall\node-v16.13.2-win-x64\node-v16.13.2-win-x64\node.exe D:\devProjectCode\vueCode\baipao-h5\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'D:\\devToolInstall\\node-v16.13.2-win-x64\\node-v16.13.2-win-x64\\node.exe',
npm ERR! gyp verb cli   'D:\\devProjectCode\\vueCode\\baipao-h5\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.13.2 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError 

...

npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb could not find "python". checking python launcher
npm ERR! gyp verb could not find "python". guessing location
npm ERR! gyp verb ensuring that file exists: C:\Python27\python.exe
npm ERR! gyp verb ensuring that file exists: C:\Python27\python.exe
npm ERR! gyp verb ensuring that file exists: C:\Python27\python.exe
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
npm ERR! gyp ERR! stack     at PythonFinder.failNoPython (D:\devProjectCode\vueCode\baipao-h5\node_modules\node-gyp\lib\configure.js:484:19)
npm ERR! gyp ERR! stack     at PythonFinder.<anonymous> (D:\devProjectCode\vueCode\baipao-h5\node_modules\node-gyp\lib\configure.js:509:16)
npm ERR! gyp ERR! stack     at callback (D:\devProjectCode\vueCode\baipao-h5\node_modules\graceful-fs\polyfills.js:295:20)
npm ERR! gyp ERR! stack     at FSReqCallback.oncomplete (node:fs:198:21)npm ERR! gyp ERR! System Windows_NT 10.0.19044npm ERR! gyp ERR! command 
"rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd D:\devProjectCode\vueCode\xxxx\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.13.2
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

node和node-sass版本问题

Node v16需要6.0+

sass/node-sass: Node.js bindings to libsass (github.com)

升级node-sass

修改"node-sass": "^4.12.0"到^6.0.1,重新执行npm install

npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
...
node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@7.1.2
npm ERR! gyp info using node@16.13.2 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb find Python Python is not set from command line or npm configuration
npm ERR! gyp verb find Python Python is not set from environment variable PYTHON
npm ERR! gyp verb find Python checking if "python3" can be used
npm ERR! gyp verb find Python - executing "python3" to get executable path
npm ERR! gyp verb find Python - "python3" is not in PATH or produced an error
npm ERR! gyp verb find Python checking if "python" can be used
npm ERR! gyp verb find Python - executing "python" to get executable path
npm ERR! gyp verb find Python - "python" is not in PATH or produced an error
npm ERR! gyp verb find Python checking if "python2" can be used
npm ERR! gyp verb find Python - executing "python2" to get executable path
npm ERR! gyp verb find Python - "python2" is not in PATH or produced an error
npm ERR! gyp verb find Python checking if Python is C:\Python37\python.exe
npm ERR! gyp verb find Python - executing "C:\Python37\python.exe" to get version
npm ERR! gyp verb find Python - "C:\Python37\python.exe" could not be run
npm ERR! gyp verb find Python checking if Python is C:\Python27\python.exe
npm ERR! gyp verb find Python - executing "C:\Python27\python.exe" to get version
npm ERR! gyp verb find Python - "C:\Python27\python.exe" could not be run
npm ERR! gyp verb find Python checking if the py launcher can be used to find Python
npm ERR! gyp verb find Python - executing "py.exe" to get Python executable path
npm ERR! gyp verb find Python - "py.exe" is not in PATH or produced an error
npm ERR! gyp ERR! find Python
npm ERR! gyp ERR! find Python Python is not set from command line or npm configuration
npm ERR! gyp ERR! find Python Python is not set from environment variable PYTHON
npm ERR! gyp ERR! find Python checking if "python3" can be used
npm ERR! gyp ERR! find Python - "python3" is not in PATH or produced an error
npm ERR! gyp ERR! find Python checking if "python" can be used
npm ERR! gyp ERR! find Python - "python" is not in PATH or produced an error
npm ERR! gyp ERR! find Python checking if "python2" can be used
npm ERR! gyp ERR! find Python - "python2" is not in PATH or produced an error
npm ERR! gyp ERR! find Python checking if Python is C:\Python37\python.exe
npm ERR! gyp ERR! find Python - "C:\Python37\python.exe" could not be run
npm ERR! gyp ERR! find Python checking if Python is C:\Python27\python.exe
npm ERR! gyp ERR! find Python - "C:\Python27\python.exe" could not be run
npm ERR! gyp ERR! find Python checking if the py launcher can be used to find Python
npm ERR! gyp ERR! find Python - "py.exe" is not in PATH or produced an error
npm ERR! gyp ERR! find Python
npm ERR! gyp ERR! find Python **********************************************************
npm ERR! gyp ERR! find Python You need to install the latest version of Python.
npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not,
npm ERR! gyp ERR! find Python you can try one of the following options:
npm ERR! gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe"
npm ERR! gyp ERR! find Python   (accepted by both node-gyp and npm)
npm ERR! gyp ERR! find Python - Set the environment variable PYTHON
npm ERR! gyp ERR! find Python - Set the npm configuration variable python:
npm ERR! gyp ERR! find Python   npm config set python "C:\Path\To\python.exe"
npm ERR! gyp ERR! find Python For more information consult the documentation at:
npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installation
npm ERR! gyp ERR! find Python **********************************************************
npm ERR! gyp ERR! find Python
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Python installation to use
...
(node:internal/child_process:288:12)
npm ERR! gyp ERR! stack     at onErrorNT (node:internal/child_process:477:16)
npm ERR! gyp ERR! stack     at processTicksAndRejections (node:internal/process/task_queues:83:21)
npm ERR! gyp ERR! System Windows_NT 10.0.19044
...
npm ERR! gyp ERR! node -v v16.13.2
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

对于非必要python环境，建议用以下方式，node会为你匹配对应node版本的python，这样将避免后续使用中的版本过高或过低造成的编译失败问题，比如node16+在python2.x下编译会抛出version问题。

• 临时设置

npm install --registry=registry.npm.taobao.org --disturl=npm.taobao.org/dist --sass-binary-site=npm.taobao.org/mirrors/nod…

淘宝npm包镜像：--registry=https://registry.npm.taobao.org

淘宝node源码镜像，一些二进制包编译时用:--disturl=https://npm.taobao.org/dist

node-sass镜像:--sass-binary-site=http://npm.taobao.org/mirrors/node-sass

已经能安装成功了

📢📢 「重要通知」原淘宝 npm 域名即将停止解析 📢📢

npmmirror 中国镜像站

（没有成功）

npm install  --registry=https://registry.npmmirror.com --disturl=https://npmmirror.com/mirrors --sass-binary-site=https://registry.npmmirror.com/binary.html?path=node-sass

• 修改npm config配置文件（没有成功）

npm config set sass_binary_site=https://npmmirror.com/mirrors/node-sass

• 手工编辑（没有成功）

npm config edit

配置sass_binary_path

• 下载到本地(win10系统） registry.npmmirror.com/binary.html…

D:\devProjectCode\vueCode\xxxxx\win32-x64-93_binding.node

npm install node-sass@6 --sass-binary-path=D:\devProjectCode\vueCode\xxxxx\win32-x64-93_binding.node -D

下载成功！

运行项目报错

npm run server:提示如下错误

 ERROR  Failed to compile with 28 errors                                                                                                                                           上午10:06:51
 error  in ./src/App.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
    at getSassImplementation (D:\devProjectCode\vueCode\baipao-h5\node_modules\sass-loader\dist\getSassImplementation.js:46:13)
    at Object.loader (D:\devProjectCode\vueCode\baipao-h5\node_modules\sass-loader\dist\index.js:40:61)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss& 4:14-416 14:3-18:5 15:22-424
 @ ./src/App.vue?vue&type=style&index=0&lang=scss&
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.122:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

node-sass和sass-loader版本问题

sass-loader - npm (npmjs.com)

我这里就用10.3.1尝试一下，重新npm install运行：

成功,两年后再战！

其他项目遇到的问题

这个项目使用的sass_binary_path方式安装node-sass,会出现一下错误：

ERROR in ./src/app.scss (./node_modules/css-loader??ref--13-1!./node_modules/postcss-loader/lib??ref--13-2!./node_modules/sass-loader/dist/cjs.js??ref--13-3!./src/app.scss)
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
ENOENT: no such file or directory, scandir 'D:\devProjectCode\vueCode\xxxx\node_modules\node-sass\vendor'
 @ ./src/app.scss 4:14-190 13:3-17:5 14:22-198
 @ ./src lazy ^\.\/.*$ namespace object
 @ ./src/util/initData.js
 @ ./src/main.js
 @ multi babel-polyfill ./src/main.js

执行node node_modules/node-sass/scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v6.0.1/win32-x64-93_binding.node
Download complete
Binary saved to D:\devProjectCode\vueCode\xxxx\node_modules\node-sass\vendor\win32-x64-93\binding.node

又一个错误：

ERROR in ./src/App.vue
Module build failed (from ./node_modules/vue-loader/index.js):
TypeError: Cannot read properties of undefined (reading 'vue')
   at Object.module.exports (D:\devProjectCode\vueCode\baipao\node_modules\vue-loader\lib\loader.js:61:18)
@ ./src/main.js 10:0-24 365:21-24
@ multi babel-polyfill ./src/main.js

这个项目太大了，升级需要改太多东西，终于放弃了，乖乖用node-v10版本吧

使用dart-sass一个大大的老项目升级到node-v16成功拉

用前面node-sass没有成功，这里用的是dart-sass,早在两年前sass官方就推荐用dart-sass拉

删除node-sass，引入dart-sass，我这里用的是3年前的版本1.22.10

 "sass-loader": "^7.1.0",
 "sass": "1.22.10", //dart-sass

查看npm依赖的依赖树，depth 2表示查看依赖深度为2

npm list --depth 2

可以看到element-theme依赖了node-sass

element-theme这个包已经很久没有更新，里面引用了node-sass，当然在我这个项目中也没有用到主题切换的功能。

  //移除这两个包
  "element-theme": "^2.0.1",
  "element-theme-chalk": "2.9.2",

执行npm install和npm run dev

修改了一个这样的错误

p.1,
li.1,
div.1 {
 mso-style-name: 列出段落1;
 margin: 0cm;
 margin-bottom: 0.0001pt;
 text-align: justify;
 text-justify: inter-ideograph;
 text-indent: 21pt;
 font-size: 10.5pt;
 font-family: "Times New Roman", serif;
}

改成了，class不能用数字开头吗？为什么以前可以现在就不行呢？

p.d1,
li.d1,
div.d1 {
 mso-style-name: 列出段落1;
 margin: 0cm;
 margin-bottom: 0.0001pt;
 text-align: justify;
 text-justify: inter-ideograph;
 text-indent: 21pt;
 font-size: 10.5pt;
 font-family: "Times New Roman", serif;
}