1.确保已经全局安装了vue,electron,vue-cli,cnpm,
//全局安装最新的vue/cli
cnpm i @vue/cli -g
2.使用vue-cli创建vue项目
这里使用cli创建项目可选择自定义安装根据提示回车
vue create electron-demo
3.cli讲项目创建好后,一般是没有vue.config.js的,需要自己新建一个在根目录
这里写一个简单的vue.config.js模板
//vue.config.js
module.exports = {
/*
2.1部署应用包时的基本URL。用法和webpack本身的output.publicPath一致。
但在cli的其它地方也会用到这个值，所以请不要直接修改webpack的output.publicPath。
2.2默认情况下,Vue Cli会假设你的应用是被部署在一个域名的根路径。
如我本地的应用的路径是“D:\WORK\study\vue\vue_cli3_test\demo1”，则在这个应用中，根路径就是“D:\WORK\study\vue\vue_cli3_test\demo1”
*/
publicPath : '/',
//3.当运行vue-cli-service build时生成的生产环境构建环境的目录。用法和webpack的output.path一样，不要修改output.path
outputDir :'dist',
//4.放置打包后生成的静态资源（js、css、img、fonts）的目录，该目录相对于outputDir。
assetsDir:' ',
//5.指定生成的index.html的输出路径，相对于outputDir。也可以是一个绝对路径。
indexPath : 'index.html',
//6.
filenameHashing : true,
//7.多页应用模式下构建应用
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: '测试程序',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
// 当使用只有入口的字符串格式时，
// 模板会被推导为 `public/subpage.html`
// 并且如果找不到的话，就回退到 `public/index.html`。
// 输出文件名会被推导为 `subpage.html`。
},
//8.安装@vue/cli-plugin-eslint后生效。为true时将检查错误输出为编译警告输出到命令行，编译不会失败。
//为"error"时，将检查错误直接显示在浏览器中。强制eslint-loader将lint错误输出为编译错误，编译会失败。
lintOnSave : true,
//10.
transpileDependencies : [],
//11.如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
productionSourceMap : true,
//12.
crossorigin : undefined,
//13.
integrity : false,
//14.
parallel : require('os').cpus().length > 1 ,
//15.向PWA插件传递选项
pwa : {},
//16.不进行任何schema验证的对象，可以用来传递任何第三方插件选项，不是webpack的plugins
pluginOptions: {
electronBuilder: {
builderOptions: {
//打包之后的exe图标
// win: {
// icon: './public/favicon.ico'
// },
// mac: {
// icon: './public/favicon.ico'
// },
productName: '正式app'
}
}
}
}
4.进入项目根目录,安装electron-builder,这里会自动的更新package.json,自动生成src/background.js
vue add electron-builder
//或者使用yarn
//yarn add vue-cli-plugin-electron-builder -D --tilde
//PS: yarn add --tilde/-T // 安装包的次要版本里的最新版
4.1 如果网络不好,无法自动add,那么需要手动加入依赖到package.json中,手动新建src/background.js,在package.json中新增以下几行,再执行cnpm install
...
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
+ "electron:build": "vue-cli-service electron:build",
+ "electron:serve": "vue-cli-service electron:serve",
+ "postinstall": "electron-builder install-app-deps",
+ "postuninstall": "electron-builder install-app-deps"
},
+ "main": "background.js",
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.6",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.1",
+ "electron": "^5.0.6",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
+ "vue-cli-plugin-electron-builder": "^1.3.5",
"vue-template-compiler": "^2.6.10"
},
...
5.开发调试模式
electron:serve
6.打包生成exe,生成到electron-dist/中,双击exe会安装到C盘
C:\Users\cjt\AppData\Local\Programs\electron-demo
electron:build
7.一些常用配置
builderOptions:{
...
productName: "天翼云空间",
artifactName: "${productName}_安装包.${ext}",//build包名字
nsis: {
"oneClick": false, //是否可单击打开,如果用户自定义安装,一定要是false
"allowToChangeInstallationDirectory": true //是否用户自定义安装路径
}
}
网友评论