vue项目兼容pc+mobile方案

Question

最近做一个web项目:vue+vue-router_vuex
因为要兼容pc与mobile，架子是vue-cli4撘的，

我搜索了一下实现方案：

1.html根字体结合vw动态变换，用rem动态布局（凹凸实验室）
2.pc端和移动端分别有一套自己的css,到时候分别加载就行了

我最终的想法是结合postcss的各种插件做移动端（主要参考大漠（免费）），pc端用媒体查询做一个简单的适配,兼顾了用户体验与维护成本。

现在的问题是如何配置当移动端时我不需要postcss的postcss-px-to-viewport插件，（selectorBlackList属性只可忽略不转换的类）让pc单独的样式文件px不进行转换。

也期待大家给出你们自己工作中的实际解决方案，不胜感谢！

Answer 1

我试着在vue.comvfigure动态配置

css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      postcss: {
        plugins: isMobileOrPc()
          ? [
              pptv({
                viewportWidth: 750, // (Number) The width of the viewport.
                viewportHeight: 1334, // (Number) The height of the viewport.
                unitPrecision: 3, 
                viewportUnit: "vw", // (String) Expected units.
                selectorBlackList: [".ignore", ".hairlines"], 
                minPixelValue: 1, 
                mediaQuery: false 
              })
            ]
          : []
      }
    },

但是失败了，因为isMobileOrPc()函数中用的navigator不支持!

ERROR  Error loading vue.config.js:
ERROR  ReferenceError: navigator is not defined

有小伙伴帮帮我吗