electron-vite初遇

electron-vite 是一个新型 Electron 开发构建工具，旨在为 Electron 提供更快、更精简的开发体验。这次主要是使用react-ts模板，实战过程中也遇到些问题，记录一下当时的解决方案;

项目中依赖

typescript 复制代码

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "An Electron application with React and TypeScript",
  "main": "./out/main/index.js",
  "author": "example.com",
  "homepage": "https://www.electronjs.org",
  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
    "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
    "typecheck:web": "tsc --noEmit -p tsconfig.web.json --composite false",
    "typecheck": "npm run typecheck:node && npm run typecheck:web",
    "start": "electron-vite preview",
    "serve": "electron-vite dev",
    "build": "npm run typecheck && electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:win": "npm run build && electron-builder --win --config",
    "build:mac": "electron-vite build && electron-builder --mac --config",
    "build:linux": "electron-vite build && electron-builder --linux --config"
  },
  "dependencies": {
    "@electron-toolkit/preload": "^2.0.0",
    "@electron-toolkit/utils": "^1.0.2",
    "electron-updater": "^5.3.0"
  },
  "devDependencies": {
    "@electron-toolkit/tsconfig": "^1.0.1",
    "@electron/notarize": "^1.2.3",
    "@reduxjs/toolkit": "^1.9.5",
    "@types/node": "^18.16.19",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "@vitejs/plugin-react": "^4.0.3",
    "antd": "^5.7.3",
    "electron": "^24.6.2",
    "electron-builder": "^23.6.0",
    "electron-vite": "^1.0.25",
    "eslint": "^8.44.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "less": "^4.1.3",
    "less-loader": "^11.1.3",
    "moment": "^2.29.4",
    "prettier": "^2.8.8",
    "react": "^18.2.0",
    "react-activation": "^0.12.4",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.2",
    "react-router-dom": "^6.14.2",
    "redux-persist": "^6.0.0",
    "typescript": "^5.1.6",
    "vite": "^4.4.2"
  }
}

路径别名

typescript 复制代码

// tsconfig.web.json 文件
"paths": {
  "@renderer/*": [
    "src/renderer/src/*"
  ],
  "@/*": [
    "src/renderer/src/*"
  ]
}
// electron.vite.config.ts 文件
resolve: {
  alias: {
    '@renderer': resolve('src/renderer/src'),
    '@': resolve('src/renderer/src')
  }
},

配置less

typescript 复制代码

// 下载less/less-loader
npm i less -D
npm i less-loader -D
// electron.vite.config.ts 文件
renderer: {
    css: {
      preprocessorOptions: {
        less: {
          additionalData: `@import '/src/assets/style/global.less';`,
          javascriptEnabled: true
        }
      }
    },
}

报错: xxxx is declared but its value is never read

typescript 复制代码

/* 方案1 */
// @ts-ignore
const unusedVar: string = "Hello";
/* 方案2[不建议,改完就变成全局，就失去检测的意义] tsconfig.json  */
{ 
    "compilerOptions": { 
        "noUnusedLocals": false,
        "noUnusedParameters": false
    }
}

报错: Content Security Policy

html 复制代码

/* 注销掉meta 标签
`default-src 'self'`：设置默认的资源加载策略，只允许从同源（当前网站）加载资源。  
`script-src 'self'`：设置脚本加载的策略，只允许从同源加载脚本。  
`style-src 'self' 'unsafe-inline'`：设置样式加载的策略，只允许从同源加载样式，同时允许内联样式。
*/

 <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"
/>

react多窗口配置

typescript 复制代码

// main.js
 meetingWindow.loadURL(`file://${join(__dirname, '../renderer/index.html')}#/meetingPage`)