2019-06-03 Vue+elementUI build打包部署后字体图标丢失问题

自己搭建的Vue项目,没有使用vue-cli,引入elementUI时提示字体图标404,找不到文件,如下错误:


GET http://localhost:9090/WEB-INF/content/2fad952a20fbbcfd1bf2ebb210dccf7a.woff 404 (Not Found)

在网上查了下解决办法,是因为elementUI的字体图标是.woff和.ttf格式的,在webpack的loaders中需要配置,在module:{loaders:{ }}中新增内容,如下:

{
        test: /\.(eot|svg|ttf|woff|woff2?)$/,
        loader: 'file-loader'
}

然后通过npm安装file-loader依赖,命令如下:
npm 或者 cnpm install file-loader --save
如果你足够幸运那么问题应该解决了。很不幸我就是不幸的那个,如果你也是,那么接着往下看


404没有了,可是引入的所有字体图标全部显示方框。

暴力解决方案:
index.html引入样式文件CDN链接即可



引入成功后会发现之前的font-awesome无效,这时去源码查看会看到font-awesome图标前缀是fa fa-xxx形式,但element框架的图标源码格式为el-icon-xxx形式。

优雅解决方案:
多方查证才发现是安装的file-loader依赖和webpack版本冲突,但是又不敢随便修改webpack的版本,于是最后采用了一个方法,将file-loader更换为url-loader,于是问题圆满解决
附上module:{loaders:{ }}中新增的最终代码:

{
        test: /\.(eot|svg|ttf|woff|woff2?)$/,
        loader: 'url-loader'
}

然后 npm 或者 cnpm 来 install url-loader --save

或者尝试以下解决方法:
webpack module配置:(build目录下webpack.base.conf.js)

module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },

webpack utils.js 修改:(build目录下utils.js)

添加 publicPath: '../../'

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

图标显示出来了

你可能感兴趣的:(2019-06-03 Vue+elementUI build打包部署后字体图标丢失问题)