webpack css中字体文件路径问题

问题：

webpack直接打包vue项目无法加载按钮上的图标，查看加载发现是字体的引用路径错了

好像css中的url()用的是相对路径，以css所在的路径为根目录

解决办法：

修改webpack.base.conf.js中的

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

修改后

rules: [
	{
		test: /\.(woff|woff2|eot|ttf|otf)(\?.*)?$/,
		loader: 'url-loader',
		options: {
			limit: 10000,
			name: '[name].[hash:7].[ext]',			//文件名
			publicPath:'../fonts/',					//打包时替换的路径
			outputPath:utils.assetsPath('fonts/')	//文件输出路径
		}
	}
]

打包成功

另一种方法：
也可以直接修改 options.name

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

但是这样打包后的fonts文件夹会在dist文件夹外面，需要手动剪切到static文件夹下