vuecli4 使用 vw 插件遇到的问题

1. 通过vuecli 创建一个 vue项目如：vue create vuedemo

配置完之后，npm run serve 启动项目

1-1

1-2

2. 安装需要的插件

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano postcss-import postcss-url   --S

3. 还需要继续安装一个插件。

npm i cssnano-preset-advanced --save-dev

4. 通过vuecli4 创建出来的vue 项目是没有 .postcssrc.js 文件的,你需要手动在根目录创建一个文件 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, // 视窗的宽度，对应的是我们设计稿的宽度，一般是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
    },
  }
}

5. 在index.html引入JavaScript文件

<script
      src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js">
    </script>
<script>
       window.onload = function () {
         window.viewportUnitsBuggyfill.init({
           hacks: window.viewportUnitsBuggyfillHacks
         });
    }
</script>