electron 将 vue项目打包成桌面应用(exe文件)

目标如题
首先你需要一个VUE项目
简单创建一个栗子

// 这是vue-cli 3.0的创建方式 2+版本好像是 vue init webpack my-app 貌似
vue create my-app

这里不做具体毕竟每个人的项目不一样如果也是想尝试一下大家可以一路默认创建一个项目就可以了

安装electron 不知道的戳链接https://blog.csdn.net/zcy_csdn123/article/details/102485857
简单的说正常安装太慢太慢使用淘宝镜像
然后克隆一个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-dev

electron_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 安装就可以了

zcy_csdn123

发布了107 篇原创文章 · 获赞 25 · 访问量 14万+

私信关注

electron 将 vue项目打包成桌面应用(exe文件)

猜你喜欢