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

1. 使用Electron Forge创建目录为my-new-app的模板项目，只需一行语句 npm init electron-app@latest my-new-app -- --template=vite-typescript

electron提供两种模板，一种webpack，一种vite，详情

2. 进入目录，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",
    "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项目有冲突。这里我的解决办法是配置两套。两套针对不同文件。

1. tsconfig.json 基础的
2. tsconfig.node.json 是针对node环境的，主要控制的文件是main.ts未来可能还有其它。
3. 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"
    ]
  }
}

运行

现在可以试试运行npn run web-dev 或npn run start了， 后续配置环境变量。下次记录吧