vue-cli4 搭建的项目按照文档提示设置无效

[18856743789]

const path = require('path') const CompressionWebpackPlugin = require('compression-webpack-plugin')

const resolve = dir => path.resolve(__dirname, dir) const productConfig = require('./src/version/config') const isProd = process.env.NODE_ENV === 'production'

module.exports = { publicPath: '/', // vue-cli3.3+,部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致 assetsDir: 'static', // 静态资源地址 productionSourceMap: false, transpileDependencies: ['view-design', 'crypto-js'], // 解决在 ie 上无法访问的问题 // scss 全局引入 css: { extract: isProd, // 开发环境下关闭，true 和热更新不兼容，保证 css 热更新 sourceMap: !isProd, loaderOptions: { sass: { // implementation: require('sass'), additionalData: @import "@/styles/common/_variables.scss"; @import "@/styles/common/_mixins.scss";, }, }, }, chainWebpack: config => { // 修复HMR config.resolve.symlinks(true)

	// 根据 js 版本配置文件修改 index.html 文件中的产品名称
	config.plugin('html').tap(options => {
		options[0].title = productConfig.productName.join('')

		return options
	})

	return config
},
// 配置 webpack
configureWebpack: config => {
	// 路径别名
	config.resolve.alias = {
		...config.resolve.alias,
		'@assets': resolve('src/assets'),
		'@styles': resolve('src/styles'),
		'@services': resolve('src/services'),
		'@router': resolve('src/router'),
		'@store': resolve('src/store'),
		'@components': resolve('src/components'),
		'@views': resolve('src/views'),
		'@scripts': resolve('src/scripts'),
		'@constants': resolve('src/constants'),
		'@mixins': resolve('src/scripts/mixins'),
		'@utils': resolve('src/scripts/utils'),
	}
	const sassLoader = require.resolve('sass-loader')

	config.module.rules
		.filter(rule => {
			return rule.test.toString().indexOf('scss') !== -1
		})
		.forEach(rule => {
			rule.oneOf.forEach(oneOfRule => {
				const sassLoaderIndex = oneOfRule.use.findIndex(
					item => item.loader === sassLoader
				)
				oneOfRule.use.splice(sassLoaderIndex, 0, {
					loader: require.resolve('css-unicode-loader'),
				})
			})
		})
	// 添加对 pdf 文件的处理 loader
	console.log(config.module.rules)
	config.module.rules = [
		...config.module.rules,
		{
			test: /\.pdf$/,
			use: 'url-loader',
		},
		{
			test: /\.scss$/,
			use: [
				{
					loader: 'css-unicode-loader', // Convert double-byte character to unicode encoding.
				},
				{
					loader: 'sass-loader', // Compiles Sass to CSS
				},
			],
		},
	]

	// gzip 压缩
	if (isProd) {
		config.plugins = [
			...config.plugins,
			new CompressionWebpackPlugin({
				filename: '[path][base].gz',
				algorithm: 'gzip',
				test: /\.(js|css|html|svg)(\?.*)?$/i,
				threshold: 10240,
				minRatio: 0.8,
			}),
		]
	} else {
		// 生成可调试的代码
		config.output.devtoolModuleFilenameTemplate = info => {
			const resPath = info.resourcePath

			if (
				(/\.vue$/.test(resPath) &&
					!/type=script/.test(info.identifier)) ||
				/node_modules/.test(resPath)
			) {
				return `webpack:///${resPath}?${info.hash}`
			}
			return `webpack:///${resPath.replace(
				'./src',
				'uncompiled-code/src'
			)}`
		}
	}
},

} Ï

[styzhang]

@18856743789 可参考这个回答解决： https://github.com/styzhang/css-unicode-loader/issues/3#issuecomment-1104988047 看你上面的配置，圈红这部分有些多余： 使用vue-cli创建项目默认就会有css预处理器sass相关的loader rule配置（参考：vue-cli预处理器），css-unicode-loader插入位置是根据vue-cli内置的.scss (或.sass) loader rule配置把css-unicode-loader插到sass-loader前面，配置好了可通过vue inspect命令输出webpack配置，看css-unicode-loader是否在sass-loader前面即可