Electron，VUEJS3，Vite，TypesSript 开发环境配置
Electron，VUEJS3，Vite，TypesSript 开发环境配置
项目早期是vue3+vite开发的，后期由于运营需求，要修改为Win安装包。
方案还是比较多的：
1. WPF - Webview
由于目前只需要兼容win，所以可以选择WPF，但WPF需要WebView的，还需要本地架设服务。整体部署比较复杂以及需要熟悉C#与WPF相关开发。
2. 原生开发
已经开发完Web，时间成本太高。
3. Electron
跨平台，并且对web,js友好，支持npm，node库。 开发成本较低。 最终方案还是选它，未来也方便移植其他平台。
Electron
开始想着，在现有的项目中加入Electron结果遇到很多坑，整体开发体验也不顺畅，跳过~~~。
创建Electron项目，在拷贝原Web项目，虽然遇到各种坑，不过最后整体配置好，开发还是很顺手，下面记录一下配置步骤。
安装 Electron & Vue
- 使用Electron Forge创建目录为my-new-app的模板项目，只需一行语句
npm init electron-app@latest my-new-app -- --template=vite-typescript
electron提供两种模板，一种webpack，一种vite，详情
- 进入目录，NPM安装开发所需要的web包，下面是一些必须安装的。
"vite": "^4.4.9",
"vue": "^3.3.4",
"vue-router": "^4.2.4",
"vue-tsc": "^1.8.8",
"@vue/tsconfig": "^0.4.0",
"naive-ui": "^2.34.4",
广告一下我使用的UI组件，naive-ui，不喜欢的朋友可以忽略。
设置 package.json
配置package.json， 这里要说一下为什么配置，默认的模板项目中直接是启动APP，对于开发并不友好，尤其是习惯web开发。 增加Script命令：
"web-dev": "vite --mode dev --config vite.renderer.config.ts",
"web-build": "vite build --mode prod --config vite.renderer.config.ts",
"web-preview": "vite preview",
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "eslint --ext .ts,.tsx ."
web开头的为浏览器开发环境，其他的为加壳环境。
以为这样简单设置就可以运行了.... 还有好多坑，继续看~
配置tsconfig.json
配置tsconfig.json, 由于选的是typescript开发模板，Electron默认创建了基于typescript的node项目，会和你要开发的vue项目有冲突。这里我的解决办法是配置两套。两套针对不同文件。
- tsconfig.json 基础的
- tsconfig.node.json 是针对node环境的，主要控制的文件是main.ts未来可能还有其它。
- tsconfig.web.json 是针对web环境的，主要控制src/*里面除了main.ts的所有文件。
由于src中包含一个公共文件main.ts，需要在tsconfig.web.json中排除。 最后形成的是三份配置。
基础配置tsconfig.json
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.web.json"
}
],
"include": [
"env.d.ts",
"global.d.ts"
]
}
node配置tsconfig.node.json
注意添加src/main.ts
{
"extends": "@tsconfig/node18/tsconfig.json",
"compilerOptions": {
"target": "ESNext",
"module": "commonjs",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"noImplicitAny": true,
"sourceMap": true,
"baseUrl": ".",
"outDir": "dist",
"moduleResolution": "node",
"resolveJsonModule": true
},
"include": ["src/main.ts"]
}
web配置tsconfig.web.json
注意排除src/main.ts
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts", "global.d.ts", "lib/main.ts"],
"exclude": ["src/**/__tests__/*", "src/main.ts"],
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"types": [
"naive-ui/volar"
]
}
}
VUE3 设置
路由需要设置一下，我这里注入了全局变量判断了平台类型window.platform?.isPC，针对平台不同使用不同的历史方式
const router = createRouter({
history: window.platform?.isPC ? createWebHashHistory() : createWebHistory(),
routes: [
{
path: '/',
name: routerKey.home,
component: HomeView
},
{
path: '/setting',
name: routerKey.XXXXX,
component: () => import('../views/setting/XXXXX.vue')
},
]
})
排除文件
打包安装程序后，发现安装目录resource/app一堆源码文件。想着应该是缺少排除设置，一开始设置package.json中的相关字段：
- files中设置排除，失败。
- build:{files}中设置排除，失败。
后来百度谷歌后，说是由于使用的是electron-forge工具，这个设置并不好使。 尝试网上说的其他方法也没作用。
后来不断尝试，在forge.config.ts中找到配置，解决方案不完美，但可以用，配置如下：
packagerConfig: {
icon: defaultIcon,
ignore:[
new RegExp('/dist'),
new RegExp('/public'),
new RegExp('/.eslintrc.js'),
new RegExp('/.gitignore'),
new RegExp('/*.d.ts'),
new RegExp('/src/assets'),
new RegExp('/src/components'),
new RegExp('/src/router'),
new RegExp('/src/stores'),
new RegExp('/src/system'),
new RegExp('/src/utils'),
new RegExp('/src/views'),
new RegExp('/src/App.vue'),
new RegExp('/src/renderer.ts'),
new RegExp('/forge.config.ts'),
new RegExp('/tsconfig.json'),
new RegExp('/tsconfig.*.json'),
new RegExp('/uno.config.ts'),
new RegExp('/vite.*.config.ts'),
// /^(?!package.json|main.ts|index.html)/,
]
}
看着上面一列一列是不是很头疼，暂时没好办法，其实只要保留三个文件即可：/package.json,src/main.ts,/index.html
后续发现在编译后.vite/build的目录中会把public目录中的文件拷贝过去。 我项目文件少，如果文件多包体积双倍。 这个一猜就对，设置vite配置就好，需要设置两个文件，vite.main.config.ts与vite.preload.config.ts，这两个和编译APP有关，增加 publicDir:false即可。 不要把静态目录拷贝到目标。除非你有特殊需求。 一般vite.renderer.config.ts会编译静态到app。
运行
现在可以试试运行npn run web-dev 或npn run start了， 后续配置环境变量。下次记录吧
