vue-cli5打包后element-ui的样式丢失、字体图标不显示

---

title: vue-cli5打包后element-ui的样式丢失、字体图标不显示
date: 2022-12-22 11:20:13
tags:

• vue-cli5
• element-ui
• electron-builder
  categories:
• Vue
  cover: ‘https://images.pexels.com/photos/290470/pexels-photo-290470.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260’

---

---

1、背景

使用vue-cli5创建vue2项目，使用了element-ui，在使用electron-builder打包build之后，发现element-ui的样式丢失，找不到fonts目录。

在网上搜索无果，大多数的解决方法都不是vue-cli5版本的，有build、utils、webpack的一些的配置，那都不是本文所论述的范围，如果你的版本不是vue-cli5，那么可以关掉这个页面了，不用浪费时间。

2、软件版本

node -v
16.16.0

"node_modules/vue": "2.7.14"
"node_modules/@vue/cli-service": "5.0.8"
"node_modules/element-ui": "2.15.12"
"node_modules/electron-builder": "22.14.13"
"node_modules/electron": "22.0.0"

3、Scripts

"scripts": {
    "serve": "vue-cli-service electron:serve",
    "build": "vue-cli-service electron:build",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
}

4、现象

启动使用：npm run serve 一切正常

  npm run serve

打包使用：npm run build 字体、样式丢失

  npm run build

5、解决方案

找到 vue.config.js (vue-cli5只有这个，没有别的)
在pluginOptions.electronBuilder 中 添加 customFileProtocol: “./”

pluginOptions: {
    electronBuilder: {
        customFileProtocol: "./"
    }
}

"./"与 assetsDir 相同，参考下面的配置：

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
    transpileDependencies: true,
    publicPath: './',
    assetsDir: "./",
    pluginOptions: {
        electronBuilder: {
            customFileProtocol: "./"
        }
    }
})

6、ALL DONE

---