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

最新推荐文章于 2024-11-07 15:44:50 发布

Aaron_1127

最新推荐文章于 2024-11-07 15:44:50 发布

阅读量1.2k

点赞数

分类专栏： # electron 文章标签： webpack vue.js node.js

本文链接：https://blog.csdn.net/weixin_43398820/article/details/108011274

版权

electron 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

背景：

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: '../' 
          }
        }
      }