检查配置

以下配置请认真检查，认真对比，不要以为自己肯定是对的，问就是血泪经历（（

vite.config.ts

base:'./', //默认是绝对路径，改成相对路径

router/index.ts

history: createWebHashHistory(),

此处默认是createWebHistory，需要改成Hash！！！！！！！！！！！！！！！！！！！

同时import处也记得改！！！！

plugins/vite.electron.build.ts

//     打包
            electronBuilder.build({
                config:{
                    directories:{
                        output:path.resolve(process.cwd(),'release'),
                        app:path.resolve(process.cwd(),'dist'),
                    },
                    files:['**/*'],
                    asar:true, // 压缩
                    // appId:'com.example.app',
                    productName:'media-transformer',
                    nsis:{
                        oneClick:false, // 取消一键安装
                        allowToChangeInstallationDirectory: true, //允许用户选择安装目录
                    }
                },
            })
        }

检查一下files:['**/*']有没有写上！！！！

没有写上的话，打包之后的...../resources/app.asar打开之后你会发现里面没有我们本来dist目录下的那些文件！！

打包

运行npm run build only即可（看package.json的scripts，这里我的build需要进行类型检查，但是报错，所以懒得检查了）

大概率此时你会发现他在下载某几个东西的时候超时，即使你已经魔法了

网上有一些方法是让你修改用户目录下的.npmrc，增加镜像，但是我试了，无事发生

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

所以还是老老实实用一些蠢办法罢（（

那就是，报错的那个下载项目点一下链接自己下载，然后解压缩到（记得带上文件夹）：

C:\Users\你的用户名\AppData\Local\electron-builder\Cache\winCodeSign

然后再build（（

最后在release\win-unpacked文件夹里面找到exe运行就可以了！

9822e358ca11ee46f7fb233fbdcdb0d

附赠调试小技巧

部署网页到云服务器

用来检查网页（Vite部分）本身是否有问题，具体教程可以看我前不知道多少篇的教程：

Vue.js(Vite)项目部署云服务器 | Rean’s Blog (rean-schwarze.github.io)

在开发环境下默认打开开发者工具

有些情况我们ban掉了快捷键或者常规我们调出开发者工具的手段用不了的时候，就让它默认打开一下就好了（

在background.ts里面添加win.webContents.openDevTools()：

const win=new BrowserWindow({
        // 省略
    })
win.webContents.openDevTools()

如果files:['**/*']没写上，这时候打开开发者工具看一下源代码里面的index.html等你会发现是空的（（（或者是一些别的东西，总之不是dist目录下的那些！

开发环境下读取编译文件

手动build完毕后，修改background.ts：

if(process.argv[2]){
        win.loadFile('./index.html') // 开发环境
    }

如果此时还是白屏，恭喜你，99.9999%是没有修改router/index.ts

真的亲测，别问为什么

参考链接

electron打包引入dist/index.html页面空白问题解决 - 简书 (jianshu.com)

Vite+Electron快速构建一个VUE3桌面应用(三)——打包 · Issue #54 · hunter-ji/Blog (github.com)