vue3(vite)+electron打包踩坑记录 - 打包vue

第一步 编译vue

使用vite构建vue，package.json如下

{"name": "central-manager","private": true,"version": "0.0.0","type": "commonjs","main": "main.js","scripts": {"dev": "vite","build": "vite build","build:electron": "electron-builder","preview": "vite preview","start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"},"build": {"appId": "com.example.app","productName": "最终产品的名称","win": {"target": ["nsis","portable"]},"files": ["dist/**/*","src/**/*","data/**/*","preload/**/*","main.js"]},"dependencies": {"node-fetch": "^2.7.0","pinia": "^2.1.7","vue": "^3.3.4","vue-router": "^4.3.0","winston": "^2.4.7","winston-daily-rotate-file": "^5.0.0"},"devDependencies": {"@vitejs/plugin-vue": "^4.2.3","electron": "^28.1.1","electron-builder": "^24.12.0","nodemon": "^3.0.2","vite": "^4.4.5"}
}

执行 npm run build，编译vue项目。
遇到的问题：

Not allowed to load local resource:

我一开始认为，既然编译了vue，那么在electron中就可以使用loadFile来加载index.html

    createWindow() {// Create the browser window.this.mainWindow = new BrowserWindow({...创建窗口的其他代码// 在开发模式下加载 Vite 开发服务器// 在生产模式下加载编译后的静态文件const startUrl = process.env.NODE_ENV === 'development'? 'http://localhost:5173' // Vite dev server URL: `file://${path.join(__dirname, '../../../dist/index.html')}`;// 加载 index.htmlthis.mainWindow.loadFile(startUrl)// mainWindow.loadFile('./src/index.html')// 打开开发工具this.mainWindow.webContents.openDevTools()}

结果就是：

解决方法：使用 loadUrl()

ERR_FILE_NOT_FOUND错误

然后继续报错：

B站找视频，找到解决方案。
在vite.config.js加base配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],base: path.resolve(__dirname, './dist/')
})

然后控制台重新执行 npm run build
发现还是和上面一样的错误。借鉴别人视频，看到vue编译后，index.html中的资源引用应该为绝对路径。我检查了一下我的index.html，发现个怪异的问题。

路径前面的盘符不知道为什么缺失。我的项目在E盘，所以我直接手动加上 E:。
成功加载：

第二步 打包electron

我使用的是electron-builder，执行nmp run build:electron。顺利打包出exe。

运行exe，没有问题，但是图标没有显示，继续琢磨。后续会更新。