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-v16.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