一、下载electron的官方例子进行修改
git clone https://github.com/electron/electron-quick-start
二、修改路径
1.打开vue.config.js中,把publicPath的值"/“改为”./"
module.exports = {
/**
* You will need to set publicPath if you plan to deploy your site under a sub path,
* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
* then publicPath should be set to "/bar/".
* In most cases please use '/' !!!
* Detail: https://cli.vuejs.org/config/#publicpath
*/
publicPath: './',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development',
productionSourceMap: false,
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
},
2.打开build/index.js,把"/“改为”./"
app.use(
publicPath,
serveStatic('./dist', {
index: ['index.html', './']
})
)
三、vue项目编译生成dist
npm run build
四、修改前面下载的官方例子
1.删除根目录下的index.html文件
2.修改main.js
// main.js 原始内容
mainWindow.loadFile('index.html')
// 修改后的内容
mainWindow.loadFile('./dist/index.html')
五、效果预览
// 国内网络下载electron可能很慢,建议设置
// npm config set registry https://registry.npm.taobao.org/
// npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
npm install
npm run start
六、在官方例子中,下载打包需要的依赖 electron-packager
npm install electron-packager --save-dev
七、在官方例子中,进入 package.json ,在 scripts 中添加 packager 指令
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"//此处为添加命令
}
如果你想修改最后打包出来的exe文件图标,类似于favicon,或者EXE的名字,可以设置 packager 的指令内容为
"packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"
八、运行命令打包
项目中会出现一个 App-win32-x64 的文件夹,这个文件就是打包好的桌面应用,文件夹里有一个 App.exe 文件,App.exe就是这个项目的启动文件:
npm run packager