使用electron-vue构建的应用打包后el-dialog弹出框右上角关闭按钮显示异常

背景：

electron-vue构建的工程中使用了el-dialog来显示弹出框，应用打包后弹出框右上角的关闭按钮显示异常，具体现象如下图所示：

分析

1. 查看错误信息可以看到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: '../' 
          }
        }
      }