打包后icon图标不显示

糯糯米丶

已于 2023-02-17 15:32:53 修改

阅读量1k

点赞数

分类专栏： web issue 文章标签： vue.js 前端 javascript

于 2023-02-17 15:30:08 首次发布

本文链接：https://blog.csdn.net/weixin_42683639/article/details/129087321

版权

web issue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章讲述了在Vue项目中，针对.ttf,.woff,.svg等字体图标在打包后出现404错误的问题，提供了在vue-cli2和vue-cli3环境下调整webpack配置的解决方案，包括修改utils文件、config/index.js或vue.config.js中的publicPath，以及配置MiniCssExtractPlugin和url-loader来修正资源路径。

摘要由CSDN通过智能技术生成

问题:

类型：.ttf, .woff, .svg等等
打包前文件为**/public/style/xx.css**，打包后icon资源，打包后生成icon图标资源访问路径：/static/css/static/fonts/，为404；
正确的资源访问路径**/static/fonts/**；

解决方案：

vue-cli2：

// utils文件
if (options.extract) {
   return ExtractTextPlugin.extract({
     use: loaders,
     fallback: 'vue-style-loader',
     publicPath: '../../', // 打包后生成的css文件=》icon地址
   })
 } else {
   return ['vue-style-loader'].concat(loaders)
 }

// config/index.js文件，修改assetsPublicPath: './'
build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static', 
    assetsPublicPath: './', // 解决打包完路径不对的问题
	...
}
// index: 模板
// assetRoot: 打包后文件要存放的路径
// assetsSubDirectory: 除了 index.html 之外的静态资源要存放的路径，
// assetsPublicPath: 代表打包后，index.html里面引用资源的的相对地址

vue-cli3

// vue.config.js文件
module.exports = {
  publicPath: './',
}

// webpack4需要在rule内配置
const mode = process.env.NODE_ENV === 'development'; // 正式版环境
let miniCssExtractPluginOption = {};
if (!mode) {
    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]'
				}
			}]
		},
		...
	]