Electron打包Vue3项目问题记录

前言

vue cli更新后创建的项目结构发生了变化，以前的一些写法不再适用，同时使用Electron将项目打包成exe时也遇到一些小问题，本文仅作为问题记录，不做原理讲解

项目信息：

1. vue/cli 5.0.6
2. node.js 16.15.1
3. electron 13.0.0
4. vue-cli-plugin-electron-builder ~2.1.1
5. windows 11

项目打包

使用electron打包vue项目很简单，项目写完后执行以下命令

vue add electron-builder

在项目根目录会生成backgroud.js，此时执行

npm run electron:serve //调试
npm run electron:build //生产，会根据配置生成exe或压缩包等

网络

打包后出现网络错误app://xxx，需要更改index.html的载入路径

  // backgroud.js
  
if (process.env.WEBPACK_DEV_SERVER_URL) {
  // code
} else {
  createProtocol('app')
  // 修改index.html载入路径
  // win.loadURL('app://./index.html')
  win.loadURL(`file://${__dirname}/index.html`);
}

如果在开发时在前端使用了代理解决跨域问题，打包前要改成直接访问的方式

// vue.config.js

module.exports = defineConfig({
  // 打包后不再使用代理
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    proxy: {
        '/api': {
            target: 'http://xxx.com',
            ws: true,
            changOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    }
  }

如果使用axios发送网络请求，在post请求中需要设置header时

// 以下配置不生效
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

// 本文解决方法是在每次post请求时添加
async post (url, data) {
  try {
    let res = await axios.post(url, data,{
      headers: {'Content-Type' : 'application/x-www-form-urlencoded;charset=UTF-8'}
    })
    return new Promise((resolve) => {
      resolve(res)
    })
  } catch (err) {
    console.log(err)
  }
 }

设置post请求头Content-Type为x-www-form-urlencoded后传参

const params = new URLSearchParams();
params.append('userId', this.userId);

界面

配置窗口大小，状态栏等

// backgroud.js

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 360,
    height: 580,
    // icon: `${__static}/NiceDay.ico`, 根目录public文件夹，如果使用默认状态栏，图标将在左上角显示
    titleBarStyle: "hidden",  // 隐藏默认状态栏将使用windows的状态栏
    titleBarOverlay: {
      color: "#fff",
      symbolColor: "black",
    },
  })

设置最小化后在系统状态栏的图标

module.exports = defineConfig({
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        "win": {
          "icon": "./public/xxx.ico"
        }
      }
    },
  },

修改打包出来的exe的图标（win下图标要求最小为256x256），在项目根目录创建build目录并将图标重命名为icon.ico后放入目录，在electron:build后添加portable参数

// package.json

"scripts": {
    "electron:build": "vue-cli-service electron:build --win portable",
},

打包后页面空白或者引入的ui组件图标丢失

// vue.config.js

module.exports = defineConfig({
  //页面空白
  publicPath: "./",     
  // 解决ui组件图标丢失（出现小方框）
  css: {
    extract: false
  },
 }

隐藏状态栏后程序界面不可拖拽，可以给元素添加drag属性

/*隐藏状态栏后拖拽*/
body {
  -webkit-app-region: drag
}

/*隐藏状态栏后拖拽，必须设置输入框和按钮等不可拖拽，否则组件无法使用*/
.nodrag {
  -webkit-app-region: no-drag; 
}

其他

打包成exe后有时仍然需要开发者工具进行调试

// backgroud.js

if (process.env.WEBPACK_DEV_SERVER_URL) {
  // code
} else {
  createProtocol('app')
  // 开发者工具
  win.webContents.openDevTools()
}