vue-cli中 css3加前綴

看了在utils.js文件下添加修改

//postcss: generateLoaders('postcss'),
postcss:[require('autoprefixer')
({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })]

或者package.json中添加

"browserslist": [
    "> 1%",
    "last 7 versions",
    "not ie <= 8",
    "ios >= 8",
    "android >= 4.0"
  ]

當然也可以這樣利用autoprefixer-loader，在utils.js文件中加入

exports.cssLoaders = function (options) {
	options = options || {}
	var cssLoader = {
		loader: 'css-loader',
		options: {
			minimize: process.env.NODE_ENV === 'production',
			sourceMap: options.sourceMap,
			modules: true,
			localIdentName: '[local]--[hash:base64:6]',
		}
	}

	// generate loader string to be used with extract text plugin
	function generateLoaders(loader, loaderOptions) {
		var loaders = [cssLoader];
		if (loader) {
			loaders.push({
				loader: loader + '-loader',
				// autoprefixer 不用options
				options: Object.assign({}, loaderOptions, {
					sourceMap: options.sourceMap
				},{
					// 加入前綴
					loader: 'autoprefixer-loader'
				})
		}

		// Extract CSS when that option is specified
		// 省略
		//。。。。。。。。
	}

	// https://vue-loader.vuejs.org/en/configurations/extract-css.html
	return {
		css: generateLoaders(),
	
		// 省略
	}
}

或者 在 styleLoader中加入

exports.styleLoaders = function (options) {
	var output = []
	var loaders = exports.cssLoaders(options)
	
	for (var extension in loaders) {
		var loader = loaders[extension]
		output.push({
				test: new RegExp('\\.' + extension + '$'),
				use: loader,
				exclude: /node_modules/,
			},{
				test: new RegExp('\\.' + extension + '$'),
				use: 'autoprefixer-loader',
				exclude: /node_modules/,
			}
		)
	}
	return output
}