105 lines
3.5 KiB
Markdown
105 lines
3.5 KiB
Markdown
## 前言
|
||
最近因为某些原因，最近决定升级VUE前端以及Electron APP工程中版本，其中Node.js版本从9.9.0升级到12.19.1。因为涉及较多东西，所以写此笔记。
|
||
|
||
推荐：
|
||
- 使用nvm，为了保证不会耽误旧版本项目，可以使用nvm对node.js版本进行管理。你只需要使用nvm use 版本号，即可切换对应版本。
|
||
- 使用版本管理，使得每一步升级都可以回滚。
|
||
|
||
## vue前端
|
||
### vue
|
||
项目用的是vue-cli生成。vue版本号需要与vue-template-compiler版本号一致。本人值从高版本一个一个往下试错，最后用了个可以跑通的版本。（因为用的是npm）
|
||
|
||
### node-sass
|
||
如果直接使用npm install -s node-sass可能会引发node-gyp编译而造成的错误。推荐先npm uninstall node-sass将node-sass卸载干净，之后再安装。这个时候就会直接下载编译好的node-sass，而不是尝试编译。
|
||
|
||
**node-sass与node.js版本也有关系**，需要注意：
|
||
|
||
NodeJS | Supported node-sass version | Node Module
|
||
---|---|---
|
||
Node 15 | 5.0+ | 88
|
||
Node 14 | 4.14+ | 83
|
||
Node 13 | 4.13+, <5.0 |79
|
||
Node 12 |4.12+ | 72
|
||
Node 11 |4.10+, <5.0 | 67
|
||
Node 10 |4.9+ | 64
|
||
Node 8 |4.5.3+, <5.0 | 57
|
||
Node <8 |<5.0 | <57
|
||
|
||
### Element-ui
|
||
当低于**2.7.0**版本的Element-ui升级时需要注意要添加对**jsx**语法的支持，否则会报一下错误：
|
||
|
||
```
|
||
error in ./~/.2.11.1@element-ui/packages/form/src/label-wrap.vue
|
||
Syntax Error: Unexpected token (23:14)
|
||
21 | }
|
||
22 | }
|
||
> 23 | return (<div class="el-form-item__label-wrap" style={style}>
|
||
| ^
|
||
24 | { slots }
|
||
25 | </div>);
|
||
26 | } else {
|
||
@ ./~/.2.11.1@element-ui/packages/form/src/label-wrap.vue 4:2-108
|
||
```
|
||
解决：
|
||
```npm
|
||
npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev
|
||
```
|
||
在项目目录的.babelrc中添加对jsx插件的配置
|
||
```json
|
||
{
|
||
"plugins": ["transform-vue-jsx", ...]
|
||
}
|
||
```
|
||
|
||
## Electron
|
||
对于Electron-vue项目，还是推荐创建一个Electron-vue新项目。之后再将代码移植过去比较好。
|
||
|
||
### require/process/module is not define
|
||
因为新版本Electron中默认没有集成node。
|
||
解决：修改src/main/index.js,在webPreferences中加入nodeIntegration: true。
|
||
```
|
||
mainWindow = new BrowserWindow({
|
||
height: 563,
|
||
useContentSize: true,
|
||
width: 1000,
|
||
webPreferences: {
|
||
nodeIntegration: true,
|
||
}
|
||
})
|
||
```
|
||
|
||
### can't read property 'app' of
|
||
是因为electron10后remote模块默认是关闭的,解决：修改src/main/index.js,在webPreferences中加入enableRemoteModule: true。
|
||
|
||
### Element-ui的el-table不显示
|
||
解决：在.electron-vue/webpack.renderer.config.js中的
|
||
```
|
||
let whiteListedModules = ['vue']
|
||
```
|
||
加入elementui：
|
||
```
|
||
let whiteListedModules = ['vue', 'element-ui']
|
||
```
|
||
## Node.js后端sqlite3模块
|
||
这里会需要使用node-gyp进行编译。这个需要安装visual studio2017，因为最高版本就支持到2017，不支持2019着实蛋疼。即使你给2019安装了2017 版本的构建套件、win10sdk与c++ ATL库，node-gyp都检测到了依然还会说版本不匹配（即使指定了版本为2019）。
|
||
|
||
如果你安装完2017还是不能正常编译，就可以手动指定vs版本了。执行
|
||
```
|
||
npm config set msvs_version 2017
|
||
```
|
||
node-gyp的具体安装步骤可以参考：https://github.com/nodejs/node-gyp#on-windows
|
||
|
||
## 清除注释
|
||
### js 双斜杠
|
||
```
|
||
//(?!.*\..*\.).*\n
|
||
```
|
||
### js 多行
|
||
```
|
||
/\*(.|\r\n|\n)*?\*/
|
||
```
|
||
|
||
### HTML
|
||
```
|
||
<!--(.|[\r\n])*?-->
|
||
``` |