javascript - vue-cli搭建的项目，加入bootstrap后，fonticon没有正确显示出来

问题描述

问 题

dev的时候没有问题，build之后出现问题

http://172.16.0.10:8085/backend/dist/static/css/static/fonts/glyphicons-halflings-regular.448c34a.woff2 Failed to load resource: the server responded with a status of 404 (Not Found)
http://172.16.0.10:8085/backend/dist/static/css/static/fonts/glyphicons-halflings-regular.fa27723.woff Failed to load resource: the server responded with a status of 404 (Not Found)
http://172.16.0.10:8085/backend/dist/static/css/static/fonts/glyphicons-halflings-regular.e18bbf6.ttf Failed to load resource: the server responded with a status of 404 (Not Found)

webpack关于这里的编译和路径没有改动：

{
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }

ps：其它插件的fonticon没有此问题

---

---

2016年10月12日 12:58:31
找到问题所在了。
因为bootstrap等一些插件他们css中，引入font的路径为../font/.....
然而webpack的配置中：为:

{
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }

所以只要加一个query对象：

{
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: [{
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        },
        {
          limit: 10000,
          name: utils.assetsPath('../fonts/[name].[hash:7].[ext]')
        }]
      }

问题就解决了！

解决方案

找到问题所在了。
因为bootstrap等一些插件他们css中，引入font的路径为../font/.....
然而webpack的配置中：为:

{

    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url',
    query: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }

所以只要加一个query对象：

{

    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url',
    query: [{
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    },
    {
      limit: 10000,
      name: utils.assetsPath('../fonts/[name].[hash:7].[ext]')
    }]
  }

问题就解决了！

这篇关于javascript - vue-cli搭建的项目，加入bootstrap后，fonticon没有正确显示出来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！