VUE大杂烩

Vue项目打包成exe可执行文件

一篇好文章 如何用electron技术将Vue项目打包成exe可执行文件

需要工具

1. node版本>12
2. vue版本>2.x
3. 魔法上网工具

不满足条件的先去升一下,再继续下边的操作

执行步骤

1. 进入Vue项目的根目录,打开命令行,注意项目所在路径不能有中文,否则会报错的哦
2. vue add electron-builder 此步骤需要魔法工具并且等待时间较长,不行的小伙伴可以点最开始的那个连接找解决办法,如果出错,请务必多尝试几遍
3. npm run electron:serve 执行上边的命令,开始编译APP，并启动开发环境APP.剩下的一些对窗口图标或尺寸进行修改的设置请看最开始的那个连接
4. npm run electron:build 打包成真正可执行的EXE可执行文件,最终在dist_electron目录下生成build后的产品,此步骤需要魔法工具。有一个需要注意的点,如果Vue项目配置了跨域,注意跨域只在开发环境中有效,项目打包部署后，项目中配置的代理将失效,需要使用nginx反向代理将所有的请求映射到对应的后端端口上去,因此在electron打包后会出现原项目跨域失效的问题

dist_electron目录结构

/dist_electron
|- /bundled
（略）
|- /win-unpacked <-- 绿色版
（略）
|- AppDemo Setup 0.1.0.exe <-- 安装文件
|- AppDemo Setup 0.1.0.exe.blockmap
|- builder-effective-config.yaml
|- index.js

跨域失效解决方案

一篇好文章 VUE常见的跨域解决方案

对基于electron-builder插件创建的桌面应用，所有的页面访问都被影射到了文件上，所以配置中的/api访问都会映射到文件上，对vue的网络代理将失效。解决这一问题可以使用electron的方式实现跨域请求，解决方案如下：

1. 修改axios模块的baseUrl属性为真实的url地址,虽然会暴露后端的ip及端口号,但也确实属于无奈之举,

Vue.prototype.axios.defaults.baseURL = "http://localhost:8080/";

2. 在electron主启动类（我的是background.js文件）中关闭web权限检查

async function createWindow() {
  const win = new BrowserWindow({
    ...
    webPreferences: {
      ...
      //关闭web权限检查，允许跨域
      webSecurity: false
    }
  })
  //打包后开启控制台
  //win.webContents.openDevTools();
  ... 
}