1、首先用vue-cli新构建一个项目
vue create vuetest
2、在项目的根目录下新建一个postcss.config.js配置文件，并且在配置文件里写入
module.exports = {"plugins": {"postcss-import": {},"postcss-url": {},"postcss-aspect-ratio-mini": {}, "postcss-write-svg": {utf8: false},"postcss-cssnext": {},"postcss-px-to-viewport": {viewportWidth: 750,// (Number) The width of the viewport.viewportHeight: 1334, // (Number) The height of the viewport.unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.viewportUnit: 'vw',// (String) Expected units.selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.minPixelValue: 1, // (Number) Set the minimum pixel value to replace.mediaQuery: false // (Boolean) Allow px to be converted in media queries.}, "postcss-viewport-units":{},"cssnano": {preset: "advanced",autoprefixer: false,"postcss-zindex": false}}}
3、安装依赖包
yarn add postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S
yarn add postcss-import --Syarn add postcss-url --Syarn add cssnano-preset-advanced --save-dev
4、到这里配置文件以及依赖包就安装完了，但是小伙伴们发现运行后项目px单位并没有转化为vw,而且上面的配置根本就不起作用？这到底是什么原因引起的呢？起始我一开始也很纳闷，一直在查资料也没有相关的文章有说明；后来我在package.json这个文件里找到了解决的方法，
"eslintConfig": {"root": true,"env": {"node": true},"extends": ["plugin:vue/essential","eslint:recommended"],"rules": {},"parserOptions": {"parser": "babel-eslint"}},"postcss": {"plugins": {"autoprefixer": {}}},"browserslist": ["> 1%","last 2 versions"]}
在package.json里找到下面的这一段配置并且删掉
"postcss": {"plugins": {"autoprefixer": {}}},
5、重新运行yarn serve就可以了
至于这是是什么原因，我也不清楚，如果知道的小伙伴可以留言告诉一下？
