vue項目中使用了vw適配方案，引入第三方ui框架mint-ui時，適配問題解決

問題分析：

一般第三方ui框架用的都是不同的適配方式，如果我們使用了vw適配，那么在使用mint-ui框架時，就會發現px單位會被轉換成vw，從而導致樣式變小的問題，如圖

解決方案

網上看到了很多種解決方案，這里推薦第四種

1、重寫第三方組件ui樣式大小
2、在postcss.config.js中的selectorBlackList選項中增加不需要vw轉換的類名
selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
3、使用rem適配方案，將原本750的寬度設置為一半，配置成37.5
https://www.jianshu.com/p/8f9aab666c4a
4、添加exclude選項，將node_modules目錄排除掉，即不會受影響

在node_mudule中找到postcss-px-to-viewport，修改index.js新增對exclude選項的處理

module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {

  var opts = objectAssign({}, defaults, options);
  var pxReplace = createPxReplace(opts.viewportWidth, opts.minPixelValue, opts.unitPrecision, opts.viewportUnit);

  return function (css) {

    css.walkDecls(function (decl, i) {
      if (options.exclude) {  // 添加對exclude選項的處理
        if (Object.prototype.toString.call(options.exclude) !== '[object RegExp]') {
          throw new Error('options.exclude should be RegExp!')
        }
        if (decl.source.input.file.match(options.exclude) !== null) return;
      }
      // This should be the fastest test and will remove most declarations
      if (decl.value.indexOf('px') === -1) return;

      if (blacklistedSelector(opts.selectorBlackList, decl.parent.selector)) return;

      decl.value = decl.value.replace(pxRegex, pxReplace);
    });

    if (opts.mediaQuery) {
      css.walkAtRules('media', function (rule) {
        if (rule.params.indexOf('px') === -1) return;
        rule.params = rule.params.replace(pxRegex, pxReplace);
      });
    }

  };
});

然后在.postcssrc.js添加postcss-px-to-viewport的exclude選項

"postcss-px-to-viewport": {
  viewportWidth: 750,
  viewportHeight: 1334,
  unitPrecision: 3,
  viewportUnit: 'vw',
  selectorBlackList: ['.ignore', '.hairlines'],
  minPixelValue: 1,
  mediaQuery: false,
  exclude: /(\/|\\)(node_modules)(\/|\\)/
},

這里需要注意了，在沒有修改postcss-px-to-viewport的index.js文件，直接在.postcssrc.js中添加了以下代碼也成功了

exclude: /(\/|\\)(node_modules)(\/|\\)/

然后我去node_mudele下找到postcss-px-to-viewport的index.js打開發現了如下代碼，看來是postcss-px-to-viewpor這個插件增加了對這個問題的處理， 我使用的版本是"postcss-px-to-viewport": "^1.1.0",

if (opts.exclude && file) {
        if (Object.prototype.toString.call(opts.exclude) === '[object RegExp]') {
          if (isExclude(opts.exclude, file)) return;
        } else if (Object.prototype.toString.call(opts.exclude) === '[object Array]') {
          for (let i = 0; i < opts.exclude.length; i++) {
            if (isExclude(opts.exclude[i], file)) return;
          }
        } else {
          throw new Error('options.exclude should be RegExp or Array.');
        }
      }

參考閱讀

Vue+ts下的移動端vw適配（第三方庫css問題）