vue项目打包桌面程序_win.loadfile("./dist/index.html")

一、npm run build 生成dist文件
注意：1.打包dist文件需要将绝对路径"/“改为相对路径”./"
vue.config.js

module.exports = {
    lintOnSave: false,  // 关闭语法检查
    publicPath: './',   // 打包后的位置(如果不设置这个静态资源会报404)
    outputDir: 'dist',  // 打包后的目录名称
    assetsDir: 'static' // 静态资源目录名称
}
1
2
3
4
5
6

2.所有的路径使用相对路径
3.vue-router里的route.js里边mode不要用history，改为默认hash模式

const router = new Router({
  // mode: 'history',
  routes: routes
})
1
2
3
4

二、下载electron的官方demo
https://gitee.com/zzf35/electron-quick-start?_from=gitee_search
三、删除项目electron-quick-start根目录中的index.html，并将之前打包的dist文件放在项目根目录下
四、在项目根中找到入口文件 main.js ，修改打包的文件路径为我们的index.html：

// main.js 原始内容 
mainWindow.loadFile('index.html') 
// 修改后的内容 
mainWindow.loadFile('./dist/index.html') 
1
2
3
4

五：继续在根目录检查 package.json 的命令，正常情况下，运行下列指令即可进行打包效果预览：

// 国内网络下载electron可能很慢，建议设置
// cnpm config set registry https://registry.npm.taobao.org/
// cnpm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
cnpm install 
cnpm run start
1
2
3
4
5

六、下载打包需要的依赖 electron-packager

cnpm install electron-packager --save-dev 
1

七、进入 package.json ，在 scripts 中添加 packager 指令，如下所示：

"scripts": { 
"start": "electron .", 
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"//此处为添加命令
}
1
2
3
4

如果你想修改最后打包出来的exe文件图标，类似于favicon，或者EXE的名字，可以设置 packager 的指令内容

"packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite" 
1

八、运行命令打包，然后项目中会出现一个 App-win32-x64 的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 App.exe 文件，App.exe就是这个项目的启动文件：

cnpm run packager 
1

至此exe程序已生成。如果需要打包成安装包文件，参考https://blog.csdn.net/qq_45184152/article/details/114081707

一些注意点
cnpm run packager 出现问题：13.229.188.59:443 timeout
1.无效（×）

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
1

2. 有效

set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
cnpm run packager
1
2