module.exports = {"plugins": {"postcss-import": {}, //用于@import導(dǎo)入css文件"postcss-url": {}, //路徑引入css文件或node_modules文件"postcss-aspect-ratio-mini": {}, //用來處理元素容器寬高比"postcss-write-svg": { utf8: false }, //用來處理移動端1px的解決方案。該插件主要使用的是border-image和background來做1px的相關(guān)處理。"postcss-cssnext": {}, //該插件可以讓我們使用CSS未來的特性，其會對這些特性做相關(guān)的兼容性處理。"postcss-px-to-viewport": { //把px單位轉(zhuǎn)換為vw、vh、vmin或者vmax這樣的視窗單位，也是vw適配方案的核心插件之一。viewportWidth: 750, //視窗的寬度viewportHeight: 1334, //視窗的高度unitPrecision: 3, //將px轉(zhuǎn)化為視窗單位值的小數(shù)位數(shù)viewportUnit: 'vw', //指定要轉(zhuǎn)換成的視窗單位值selectorBlackList: ['.ignore', '.hairlines'], //指定不轉(zhuǎn)換視窗單位值得類，可以自定義，可以無限添加minPixelValue: 1, //小于等于1px不轉(zhuǎn)換為視窗單位mediaQuery: false //允許在媒體查詢中使用px},"postcss-viewport-units":{}, //給vw、vh、vmin和vmax做適配的操作,這是實(shí)現(xiàn)vw布局必不可少的一個插件"cssnano": { //主要用來壓縮和清理CSS代碼。在Webpack中，cssnano和css-loader捆綁在一起，所以不需要自己加載它。preset: "advanced", //重復(fù)調(diào)用autoprefixer: false, //cssnext和cssnano都具有autoprefixer,事實(shí)上只需要一個，所以把默認(rèn)的autoprefixer刪除掉，然后把cssnano中的autoprefixer設(shè)置為false。"postcss-zindex": false //只要啟用了這個插件，z-index的值就會重置為1}} }

.postcssrc.js文件里邊的各個文件對應(yīng)的含義；

注意：（vue中的幾個文件的理解）

1、.postcssrc.js

眾所周知為兼容所有瀏覽器，有的CSS屬性需要對不同的瀏覽器加上前綴，然而有時添加一條屬性，需要添加3~4條類似的 屬性只是為了滿足瀏覽器的兼容，這不僅會增加許多的工作量，還會使得你的思路被打斷。 如何解決這個問題? 處理CSS前 綴問題的神器——AutoPrefixer。

Autoprefixer是一個后處理程序，你可以同Sass，Stylus或LESS等預(yù)處理器共通使用。它適用于普通的CSS，而你無需關(guān)心要 為哪些瀏覽器加前綴，只需全新關(guān)注于實(shí)現(xiàn)，并使用W3C最新的規(guī)范。

2、.eslintrc.js

eslint是用來管理和檢測js代碼風(fēng)格的工具，可以和編輯器搭配使用，如vscode的eslint插件 當(dāng)有不符合配置文件內(nèi)容的代碼出現(xiàn)就會報(bào)錯或者警告

3、.babelrc

這個文件是用來設(shè)置轉(zhuǎn)碼的規(guī)則和插件的

總結(jié)

以上是生活随笔為你收集整理的vue-cli项目中.postcssrc.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。