BlueRoseNote/VUE、Electron升级笔记.md at 30da89f4011946238c40905ca5b74f26a2e9ca5c

BlueRose/BlueRoseNote

Fork 0

BlueRose 36e95249b1 Init

2023-06-29 11:55:02 +08:00

3.5 KiB

Raw Blame History

前言

最近因为某些原因，最近决定升级VUE前端以及Electron APP工程中版本，其中Node.js版本从9.9.0升级到12.19.1。因为涉及较多东西，所以写此笔记。

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 install  babel-plugin-syntax-jsx  babel-plugin-transform-vue-jsx  babel-helper-vue-jsx-merge-props  babel-preset-env  --save-dev

在项目目录的.babelrc中添加对jsx插件的配置

{
  "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])*?-->

3.5 KiB Raw Blame History Unescape Escape

前言