关于使用Vue3+Electron+TS创建项目总结

马克￡

已于 2023-02-06 22:25:41 修改

阅读量646

点赞数

分类专栏： Electron 文章标签： electron vue.js javascript typescript

于 2023-02-06 22:16:01 首次发布

本文链接：https://blog.csdn.net/m0_60846226/article/details/128908986

版权

Electron 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于使用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        [√]

版本选择

选择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版本的但也是报错，最后试试的态度，就成功了，也不知道为啥，玄之又玄，哈哈哈哈哈哈哈哈哈。