关于使用Vue3+Electron+TS创建项目总结
本博客主要是说明创建单页面应用和多页面也用总结。
创建单页面应用(vite)
安装Vue3
通过运行指令npm create vite@latest
来创建Vue3项目,选择TS语言其他选项均可。
安装Electron
通过运行指令npm i electron@22 -D
来安装22版本的Electron,因为它是稳定的。
安装辅助库
通过运行指令npm i vite-plugin-electron@0.10.4 -D
来安装辅助库。
配置辅助库
{root}/vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), electron([
// 程序的主要入口文件
{
entry: 'electron/main.ts',
onstart: options => {
// 多个页面时,自定义启动页面
options.startup(['.', '--no-sandbox'])
},
},
{
// 多个预加载
entry: 'electron/preload.ts',
onstart(options) {
// 重载preload文件为ts文件
options.reload()
},
},
{
// 多个预加载
entry: 'electron/preload-list.ts',
onstart(options) {
// 重载ts文件为js
options.reload()
},
}
])]
})
设置package.json
通过在package.json文件中去除"type": "module"
选项,添加"main": "dist-electron/main.js"
选项。
{root}/package.json
{
"name": "vue-electron",
"private": true,
"version": "0.0.0",
"main": "dist-electron/main.js",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.41"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.2.0",
"electron": "^19.1.9",
"typescript": "^4.6.4",
"vite": "^3.2.3",
"vite-plugin-electron": "^0.10.4",
"vue-tsc": "^1.0.9"
}
}
成功运行
如此再次执行npm run dev
就可以成功运行此项目。
路径别名修改为@
{root}/vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), electron([
// 程序的主要入口文件
{
entry: 'electron/main.ts',
onstart: options => {
// 多个页面时,自定义启动页面
options.startup(['.', '--no-sandbox'])
},
},
{
entry: 'electron/preload.ts',
onstart(options) {
// 重载preload文件为ts文件
options.reload()
},
},
{
entry: 'electron/preload1.ts',
onstart(options) {
// 重载preload文件为ts文件
options.reload()
},
}
])],
resolve: {
alias: { '@': path.resolve('./src') }
}
})
{root}/tsconfig.json
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
创建多页面应用(webpack)
预先设置
通过运行指令npm i @vue/cli@4.5.9 -g
安装Webpack的Vue项目创建脚手架。
注意:@vue/cli只能为@4.5版本吧,试过@5的一直出错各种错误。
创建Vue项目
通过运行指令vue create project-name
来创建项目。
项目配置
Default([Vue 3] babel, eslint)
Default([Vue 2] babel, eslint)
Manually select features [√]
相关插件选择
(*) Babel
(*) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
( ) Vuex
(*) Css Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
版本选择
选择Vue3。
其他选择
Use class-style component syntax? (y/n) [N]
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?(y/n) [Y] // 这一项我试过没选是不可以的,可能电脑问题,具体情况具体分析
Use history mode for router? (Requires proper server setup for index fallback in production)?(y/n) [Y]
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
Sass/SCSS (with dart-sass)
Less // less [√]
Stylus //
Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier [√]
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
(*) Lint on save //
( ) Lint and fix on commit
Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files
In package.json [√]
Save this as a preset for future projects?(y/n) [N]
安装Electron库
通过运行指令npm i electron@22 -D
指令来安装Electron库。
安装整合库
通过运行指令vue add electron-builder
来安装整合Vue+Electron。
配置vue.config.js
{root}/vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
nodeIntegration:true,
chainWebpackMainProcess: (config) => {
config.output.filename('background.js') //解决 报[DEP0128] DeprecationWarning: Invalid 'main' field in '\dist_electron\package.json' of 'background.js'.
}
}
}
总结
小编也是初学electron。接触到electron首先是用@vue/cli@5去创建多窗口应用,后来发现,真是各种问题都找了,各种可能的解决方案都试了就是不好用。最后,是在找过的中间,通过观察他们共同的都是用@vue/cli@4版本去创建的项目,后来使用4版本的但也是报错,最后试试的态度,就成功了,也不知道为啥,玄之又玄,哈哈哈哈哈哈哈哈哈。