錯誤描述：

Vue+elementUI build打包部署後字型圖示丟失，控制檯顯示檔案element-icons.woff和element-icons.ttf檔案404

錯誤展現：

控制檯報錯截圖

dom渲染展示

解決方法：

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)
  }

處理結果：

到此這篇關於詳解Vue+elementUI build打包部署後字型圖示丟失問題的文章就介紹到這了,更多相關element build打包部署字型圖示丟失內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！