nuxt 使用 rem

• 方法一：

安装：npm install amfe-flexible postcss-pxtorem -S

// nuxt.config.js
export default {
...

plugins: [
    {
      src: './node_modules/amfe-flexible/index.js',
      ssr: false
    },
 ...
],

build: {
    postcss: {
      plugins: {
        'postcss-pxtorem': {
          rootValue: 75, // 根据ui根字体大小
          propList: ['*']
        },
      }
    },
 ...
}

...
}

 

• 方法二： 

 安装：npm install postcss-pxtorem -S

// nuxt.config.js
export default {
...

head: {
    script: [
      {
        src: `${ ROUTER_MAP[buildEnv] || ROUTER_MAP['test'] }/cdn/amfe-flexible.min.js`,
        type: 'text/javascript',
        charset: 'utf-8'
      }
    ]
 ...
},

build: {
    postcss: {
      plugins: {
        'postcss-pxtorem': {
          rootValue: 75, // 根据ui根字体大小
          propList: ['*']
        },
      }
    },
 ...
}

...
}

在文件夹 static 新增文件路径：static/cdn/amfe-flexible.min.js 

!function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&&d()}),o>=2){var a=t.createElement("body"),s=t.createElement("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&&i.classList.add("hairlines"),i.removeChild(a)}}(window,document);