vue3(vite)+electron打包踩坑记录（1）

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"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

执行 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.html
        this.mainWindow.loadFile(startUrl)
        // mainWindow.loadFile('./src/index.html')
        // 打开开发工具
        this.mainWindow.webContents.openDevTools()
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

结果就是：

解决方法：使用 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/')
})

1
2
3
4
5
6
7
8
9
10

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

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

第二步 打包electron

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

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