目标如题
首先你需要一个VUE项目
简单创建一个栗子
// 这是vue-cli 3.0的创建方式 2+版本好像是 vue init webpack my-app 貌似
vue create my-app这里不做具体 毕竟每个人的项目不一样 如果也是想尝试一下 大家可以一路默认创建一个项目就可以了
安装electron 不知道的戳链接
简单的说 正常安装太慢太慢 使用淘宝镜像
然后克隆一个electron 官网的例子
# 克隆这仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库
$ npm install
# 运行应用
$ npm start然后 你得到了两个项目 my-app electron-quick-start
分别启动这两个项目 看是否能正常运行
VUE的不说了，electron 的项目启动后 弹出一个应用框， 里面有hello word 内容
下面是重点了
在my-app项目的package.json 中scripts下添加2行 如下
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron_dev": "npm run build && electron build/electron.js", // 添加
"electron_build": "electron-packager ./dist --platform=win32 --arch=x64 --icon=./public/favicon.ico --overwrite"// 添加
},第二天命令的解释
electron-packager –platform= –arch= [optional flags…]
sourcedir 资源路径，在本例中既是./dist/
appname 打包出的exe名称
platform 平台名称（windows是win32）
arch 版本，本例为x64
这两行是electron的启动 和打包命令
分别用了electron 和electron-packager
安装这两个
切换到my-app项目下
npm intall electron --save-dev
npm install electron-packager --save-develectron_dev 命令前的准备，就是需要将vue.config.js 中的publicPath: ‘/’ 修改为 ‘./’
创建完项目没有vue.config.js 创建一个 并填充内容
// 基本路径
publicPath: './', // 为了electron 从/ 改成./这样electron_dev 命令就可以找到正确的路径
vue.config.js 我是用的 因为这个项目里面什么都没有就是基本的 所以这个配置也是基本的 具体大家根据自己项目更改，若是想学了这个 基本不用管 复制过去就好
module.exports = {
// 基本路径
publicPath: './', // 为了electron 从/ 改成./
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// webpack配置
chainWebpack: () => { },
configureWebpack: () => { },
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
parallel: require('os').cpus().length > 1,
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: true, //配置自动启动浏览器
host: 'localhost',
port: 8080, // 端口号
https: false,
hotOnly: false, // https:{type:Boolean}
// 配置跨域处理,只有一个代理
before: app => { }
},
// 第三方插件配置
pluginOptions: {}
}将electron-quick-start 中的main.js 复制到my-app build下并改名字为electron.js
因为vue-cli 3.0 安装的项目没有build 目录 所以自己创建一个就可以
使用electron_dev 命令可以开启一个应用框 里面显示我们VUE项目的内容
最终my-app项目的目录结构
.history 是编辑器带的 自动忽略
build是我创建的里面包含electron.js
vue.config.js是后创建的
elecctron_build 命令 前的准备
使用electron_build 命令 可以将项目打包成一个.exe文件 我们双击文件就能打开 也就是最终的桌面应用
1、将运行npm run build 打出一个dist文件 (其实我们在使用electron_dev 命令的时候就已经打出dist文件)
2、将electron.js 复制到dist 文件下
3. 修改路径
mainWindow.loadURL(`file://${__dirname}/index.html`)4、将electron-quick-start 中的package.json 复制到dist文件下
最终看下dist文件夹内的内容
electron.js 其实就是electron-quick-start中的main.js
package.json 也是electron-quick-start中的
最后使用命令 npm run electron_build 可以打出一个文件夹 里面有.exe文件 就是想要的
说一下注意事项 已经我出过的问题
1、路径最重要 一切都正常就是打开后空白页面 很大程度在路径 确认下找的路径 是否正确
2、我曾经出现过electron_dev 可以正常显示 但是使用electron_build时报没有electron 模块的错误
因为我之前使用cnpm install electron-packager 之后用npm 安装就可以了
