解决webpack+Vue引入iView找不到字体文件的问题

深入 Webpack 和 Vue 集成中 iView 字体文件缺失的问题

在 webpack 和 Vue 的集成过程中，你可能会遇到引入 iView 库后找不到字体文件的问题。这个问题往往源于 css-loader 和 url-loader 的配置。今天，长沙网络推广将为你深入这个问题，并分享解决方案，希望对大家有所帮助。

一、问题原因

问题的根源在于 css-loader 和 url-loader 的配置中带有某些参数。具体来说，css-loader 后面的参数 modules 可能会导致打包报错，而 url-loader 后面的参数 name 可能导致引入报错。

二、原有配置（带有问题）

1. 针对 CSS 文件的处理：

```javascript

{

test: /\.css$/,

use: ExtractTextPlugin.extract({

fallback: "style-loader",

use: "css-loader?modules!postcss-loader"

})

}

```

2. 针对字体文件的处理：

```javascript

{

test: /\.(svg|ttf|eot|woff)\??.$/,

loader: "url-loader?limit=10000&name=fonts/[name].[ext]"

}

```

三、解决方案

为了解决这个问题，我们需要对配置进行调整。以下是两种可能的解决方案：

方案一：去掉参数配置。这是最直接的方法，可能适用于大部分情况。调整后的配置如下：

1. 针对 CSS 文件的处理：

```javascript

{

test: /\.css$/,

use: ExtractTextPlugin.extract({

fallback: "style-loader",

use: ["css-loader", "postcss-loader"] // 去掉 ?modules 参数

})

}

```

2. 针对字体文件的处理：

```javascript

{

test: /\.(svg|ttf|eot|woff)\??.$/,

loader: "url-loader?limit=10000" // 去掉 name 参数

}

```

方案二：对 CSS 文件进行更精细的处理。该方案通过区分 node_modules 目录内的 CSS 文件和其他 CSS 文件，对两者进行不同的处理。这种方案可能更适用于需要对第三方库进行定制化修改的情况。调整后的配置如下：

```javascript

{

test: /\.css$/,

exclude: /node_modules/, // 排除 node_modules 目录内的 CSS 文件