為了使我們的項(xiàng)目兼容各種瀏覽器，我們可能會(huì)在開(kāi)發(fā)中寫(xiě)大量的前綴。即使有了IDE為我們提供了邊界的方式。但是仍然需要我們?nèi)セ〞r(shí)間和精力。而這樣會(huì)浪費(fèi)我們很多的時(shí)間。為了在開(kāi)發(fā)中提升團(tuán)隊(duì)的開(kāi)發(fā)效率，并且同時(shí)節(jié)省時(shí)間，我們引入了autoprefixed。搭配webpack使用，在每次打包的時(shí)候自動(dòng)的給我們的樣式加上前綴來(lái)兼容不同的瀏覽器。

安裝依賴包

如果你是使用vue-cli構(gòu)建的項(xiàng)目。首先執(zhí)行以下代碼安裝依賴包。

npm install autoprefixer postcss postcss-loader -D

修改vue-loader配置文件

修改目錄/build/vue-loader.conf.js文件。文件的原本代碼應(yīng)該如下。

module.exports = { loaders: utils.cssLoaders({  sourceMap: isProduction   ? config[buildEnv].productionSourceMap   : config.dev.cssSourceMap,  extract: isProduction })}

將以上代碼，替換成如下代碼。

module.exports = { loaders: utils.cssLoaders({  sourceMap: isProduction   ? config[buildEnv].productionSourceMap   : config.dev.cssSourceMap,  extract: isProduction }), postcss: [require('autoprefixer')({browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8']})]}

修改utils

打開(kāi)/build/utils.js，定位到如下代碼。

postcss: generateLoaders()

將上面的代碼更改為如下代碼。

postcss: generateLoaders(['css?-autoprefixer'])

重新啟動(dòng)項(xiàng)目，就可以通過(guò)chrome的開(kāi)發(fā)者工具，可以看到編譯后的css文件，會(huì)自動(dòng)的加上兼容性的前綴。就可以放心的寫(xiě)css代碼了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。