vue-cli3打包后 element-ui的icon不显示问题

vue-cli3打包后 element-ui的icon不显示问题

icon不显示发现是路径不对，请求路径是/dist/static/css/static/fonts/732389de.element-icons.ttf，多了css/static。正确路径应该是/dist/static/fonts/732389de.element-icons.ttf

vue-cli2可以更改utils.js文件

if (options.extract) {
   return ExtractTextPlugin.extract({
     use: loaders,
     fallback: 'vue-style-loader',
     publicPath: '../../', // 解决ele小图标出不来问题
   })
 } else {
   return .concat(loaders)
 }

然后在config里面的index.js，加入assetsPublicPath: './'

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
 
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', //解决打包完路径不对的问题

但是vue-cli3没有了build文件夹，需要自己建vue.config.js文件
配置里面加入publicPath: ‘./’，

module.exports = {
  publicPath: './',
}

然而到了webpack4，不支持自定义这样配置了，需要在rules里面配置

{ test: /\.(sa|sc|c)ss$/,
	use: [
		{
			loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
			options: {
				publicPath: '../../',
			},
		},
		'css-loader',
		'sass-loader'
	]
},

当然开发模式 loader是’style-loader’时，配置项没有publicPath选项

最后

const devMode = process.env.NODE_ENV !== 'production';
let miniCssExtractPluginOption = {};
if (!devMode) {
    miniCssExtractPluginOption = {
        publicPath: '../../'
    };
}
plugins:[
	...
	new MiniCssExtractPlugin({
		filename: "static/css/style.css",
		chunkFilename: "static/css/[name].[hash:5].css"
	}),
	...
],
module: {
	rules:[
		...
		{ test: /\.(sa|sc|c)ss$/,
			use: [
				{
					loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
					options: miniCssExtractPluginOption 
				},
				'css-loader',
				'sass-loader'
			]
		},
		{ test: /\.(woff|woff2|eot|ttf|otf|svg)$/, use: [{loader: 'url-loader',options: {limit: 10000,name: 'static/fonts/[hash:8].[name].[ext]'}}]},