Vue2+Electron 快速搭建桌面应用 windows开发环境Vue2+Electron 快速搭建桌面应用 win

关于 Electron

创建Vue项目

1、全局安装 vue-cli

npm install -g @vue/cli

2、全局安装 Electron 【国内镜像安装比较快】

cnpm install electron -g

3、查看是否安装成功

vue -v
electron -v

4、vue-cli创建项目

vue create demo

根据提示自行完成

5、启动项目

npm run serve

能成功启动即可，没问题先关闭项目，进行后续集成electron操作

集成Electron

vue add electron-builder

确保之前electron已成功全局安装，否则会报错，正常情况此时终端会出现选择electron版本的选项，选择13版本

稍等片刻之后会下载一系列的依赖包，这些包都是在国外的服务器上，因此大概率下载超时，此时会报错，这里主要是这三个包 electron-v13.6.9-win32-x64, winCodeSign-2.6.0 , nsis,我这里已经下载好，可以直接粘贴到电脑对应的位置即可
electron-v13.6.9-win32-x64: C:\Users\XXX\AppData\Local\electron\Cache
winCodeSign-2.6.0:C:\Users\XXX\AppData\Local\electron-builder\Cache
nsis:C:\Users\XXX\AppData\Local\electron-builder\Cache

electron-v13.6.9-win32-x64.zip
nsis.rar
winCodeSign-2.6.0.7z

运行、打包

npm run electron:serve   //运行
npm run electron:build   //打包

打包运行图标不显示等资问题

例如 elementUi的icon字体文件不引入此插件就会显示不出来

原因：electron 生产环境下编译出的各个资源的路径都是 app://./ 这种，但是vue中有一部分路径仍然未被修改，导致页面显示异常解决办法：这里我写了一个webpack插件，将所有静态资源打包的路径改成app://./ 这种就可以了

assets.webpack.plugin.js

class AssetsWebpackPlugin {
    constructor(options) {
    }
    apply(compiler) {
        compiler.hooks.emit.tap('AssetsWebpackPlugin', (compilation) => {
            compilation.assetsInfo.forEach((assetsItem, key) => {
                if (/\.css$/.test(key) && !/^static\/lib\//.test(key)) {
                    compilation.assets[key]._value = compilation.assets[key]._value.replace(/app:\/\/\//g, "app://./")
                }
            })
        })
    }
}

module.exports = AssetsWebpackPlugin;

使用插件：vue.config.js

const AssetsWebpackPlugin = require('./assets.webpack.plugin');
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new AssetsWebpackPlugin()
    ]
  }
})