vue用import方式引入ttf字体文件报错及解决方法

关于在vue项目中引入ttf格式的字体文件，基本工作：

下载下来字体文件，新建一个font文件夹，把字体文件放进去，在新建一个font.css文件（可以不用新建，直接在主css文件里写），把字体文件@font-face引入进css里。
注：@font-face也可以直接在scss文件里写或引入，不一定要在css文件里。

前面工作做完后，运行报错O(∩_∩)O

网上查了好半天，普遍都说是配置文件webpack.config.js中没有配置解析字体的模块。
用到的方法就是在build -> webpack.config.js中module:{ rules:{}}里添加解析模块及规则：
这种：

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

还有这种：

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

一通操作后还是没有解决问题，包括用下面的命令安装解析模块后还是报错。

npm install url-loader

---

自己后来尝试出来的方法，把字体文件放在了static目录下，解决了（前面是吧字体文件放在src目录下），不知道什么缘由。

下面用一张截图看明白：

说明：
因为我同时有两个vue项目，经测试，上面这样把字体文件放在static目录下，不需要再webpack.config.js文件里添加解析规则，因为我另一个项目直接把字体文件复制到对应目录，像最后这张图这样设，根本没有添加解析规则。