vue-cli最新版本适配遇到的坑

1.vue create protecte-name 创建项目
2.目录如下

image.png

3.目录中有一个postcss.config.js的文件，我的打开里面是这样

image.png

4.但是很多人打开都是这样的

image.png

5.这就表示我们需要进行安装我们少了的东西，我只少了两个，如果三个都少了就要安装三个

npm install  postcss-import
npm install  postcss-url
npm isntall  utoprefixer

6.开始安装转换vw的相关的插件
postcss-aspect-ratio-mini
postcss-px-to-viewport
postcss-write-svg
postcss-cssnext
cssnano
postcss-viewport-units

7.最后配置postcss.config.js为图下

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
        utf8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
        viewportWidth: 750,      // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
        viewportHeight: 1334,    // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
        unitPrecision: 3,        // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
        viewportUnit: 'vw',      // 指定需要转换成的视窗单位，建议使用vw
        // selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
        minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
        mediaQuery: false       // 允许在媒体查询中转换`px`
    },
    "postcss-viewport-units":{},
    "cssnano": {
        preset: "advanced",
        autoprefixer: false,
        "postcss-zindex": false
    }
  }
}

8.弄完上面 npm run serve 启动的时候就报错了

image.png

9.要解决这个报错，需要安装这个插件
npm i cssnano-preset-advanced --save-dev
10.vw这个单位在一些较老版本手机上（安卓4.2之前的版本）不是很友好，如果需要兼容这些老手机的话，可以装viewport-units-buggyfill这个组件，安装完成后在main.js中引用这个组件

npm i viewport-units-buggyfill -S

var hacks = require('viewport-units-buggyfill/viewport-units-buggyfill.hacks');
require('viewport-units-buggyfill').init({
    hacks: hacks
});

11. 在一些老手机中还发现关于es6兼容问题，vue-cli中原本所引用的bable并不能完美解决这个问题，还需要安装这两个组件。

npm i babel-polyfill es6-promise -S

12.在main.js 引入

import "babel-polyfill"
import 'es6-promise/auto'