背景:
electron-vue构建的工程中使用了el-dialog来显示弹出框,应用打包后弹出框右上角的关闭按钮显示异常,具体现象如下图所示:
分析
- 查看错误信息可以看到element-icons-fonts.woff 和 element-icons-fonts.ttf没有找到。
2. 解压打包后的resources目录下的app.asar
安装asar
cnpm install -g asar
解压app.asar
asar extract app.asar ./myapp
通过asar解压app.asar 可以看到文件在electron --> fonts中但是最终查找是在electron --> main --> fonts去查找了。
解决
electron-vue中默认使用webpack打包,打包之后的路径和查找资源的路径不匹配导致。找到.electron-vue目录下的webpack.render.config.js文件修改woff,ttf文件的url-loader。
增加 “ publicPath: ‘…/’ ” ,具体修改如下:
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: {
loader: 'url-loader',
query: {
limit: 10000,
name: 'fonts/[name]--[folder].[ext]',
publicPath: '../'
}
}
}