vue项目打包部署elementUI的字体图标丢失问题

Posted sloanlv

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue项目打包部署elementUI的字体图标丢失问题相关的知识,希望对你有一定的参考价值。

自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你

记录一下解决办法:

webpack module配置:(build目录下webpack.base.conf.js文件)


        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文件)

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

 

只是加了  publicPath: ‘../../‘

然后打包字体图片就可以显示了

以上是关于vue项目打包部署elementUI的字体图标丢失问题的主要内容,如果未能解决你的问题,请参考以下文章

vue+elementUI引用第三方iconFont字体图标(阿里巴巴矢量图标库)

elementUI字体图标不显示问题

elementUI字体图标不显示问题

vue项目打包后,在浏览器上的标题没有图标了?打包之后丢失ico图标丢失

svg图标不显示配置问题vue

部署项目vue +阿里云服务器 + 宝塔面板