Electron打包后无法加载本地资源求助（不关闭webSecurity）

开发阶段基于Electron框架运行程序一切正常，但打包为exe后启动，Electron窗口全白，仅显示默认菜单。打开DevTools后出现如下错误：

Not allowed to load local resource:
file:///D:/MyProgramProjects/webstromProject/vue/electron-vite-demo-1/dist/win-unpacked/resources/app.asar/renderer/src/index/clipboard.html

相关代码与配置：

• main.js中页面加载代码：

mainWindow.loadFile('src/renderer/src/index/' + url + '.html')

• package.json配置：

{  
  "name": "electron-vite-demo-1",  
  "version": "1.0.0",  
  "description": "An Electron application with Vue",  
  "main": "./out/main/main.js",  
  "author": "wule.sapce",  
  "homepage": "https://www.electronjs.org",  
  "scripts": {    
    "format": "prettier --write .",    
    "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",    
    "start": "electron-vite preview",    
    "dev": "electron-vite dev",    
    "build": "electron-vite build",    
    "postinstall": "electron-builder install-app-deps",    
    "build:win": "npm run build && electron-builder --win --config",    
    "build:mac": "npm run build && electron-builder --mac --config",    
    "build:linux": "npm run build && electron-builder --linux --config"  
  },  
  "dependencies": {    
    "@electron-toolkit/preload": "^2.0.0",    
    "@electron-toolkit/utils": "^2.0.0",    
    "axios": "^1.5.0",    
    "electron-updater": "^6.1.1"  
  },  
  "devDependencies": {    
    "@electron-toolkit/eslint-config": "^1.0.1",    
    "@rushstack/eslint-patch": "^1.3.3",    
    "@vitejs/plugin-vue": "^4.3.1",    
    "@vue/eslint-config-prettier": "^8.0.0",    
    "electron": "^25.6.0",    
    "electron-builder": "^24.6.3",    
    "electron-vite": "^1.0.27",    
    "eslint": "^8.47.0",    
    "eslint-plugin-vue": "^9.17.0",    
    "less": "^4.2.0",    
    "prettier": "^3.0.2",    
    "vite": "^4.4.9",    
    "vue": "^3.3.4"  
  }
}

electron-vite打包后，renderer侧的静态资源会被编译到dist/renderer目录下，不会保留开发阶段的src/renderer/src目录结构。你在main.js中使用的是开发阶段的相对路径，打包后该路径在app.asar中不存在，导致Electron无法定位到目标HTML文件，触发资源加载错误。

1. 修正main.js中的加载路径 #

根据electron-vite的打包结构，修改loadFile的路径，同时兼容开发与生产环境：

const path = require('path')
// 判断当前环境
const isDev = process.env.NODE_ENV === 'development'

let htmlPath
if (isDev) {
  // 开发环境使用原路径
  htmlPath = path.join(__dirname, '../src/renderer/src/index/', `${url}.html`)
} else {
  // 生产环境使用打包后的路径
  htmlPath = path.join(__dirname, '../renderer/index/', `${url}.html`)
}

mainWindow.loadFile(htmlPath)

2. 确认vite输出路径（可选） #

如果自定义过renderer侧的vite.config.js输出配置，需确保打包后的HTML文件位置与上述路径匹配。默认情况下electron-vite会将renderer产物输出到dist/renderer，无需额外修改。

3. 重新打包验证 #

执行打包命令重新生成exe文件：

npm run build:win

启动生成的exe，检查窗口是否正常加载，DevTools是否还存在资源加载错误。

内容的提问来源于stack exchange，提问作者wu le