nuxt + lib-flexible + postcss-pxtorem 实现Rem适配

1.首先先用nuxt脚手架生成一个项目，这我就不说了

2.安装 lib-flexible与postcss-pxtorem

npm i -S amfe-flexible
npm install postcss-pxtorem --save-dev

3.配置 nuxt.config.js

export default {
  // ......
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      {
        name: 'viewport',
        content:
          'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'
        // 增加viewport标签
      },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || ''
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  // ......
  // 在plugins内引入 amfe-flexible ，ssr设置为false（不设置为false会报错）
  plugins: [
    {
      src: './node_modules/amfe-flexible/index.js',
      ssr: false
    }
  ],
  // ......
  // 更改build为如下，我这里面项目还引入了 vant 所以这是根字体设置为37.5
  build: {
    postcss: [
      require('postcss-pxtorem')({
        rootValue: 37.5, // vant-UI的官方根字体大小是37.5
        propList: ['*']
      }),
      require('autoprefixer')({
        browsers: ['Android >= 4.0', 'iOS >= 7']
      }),
    ],
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  }
}

4.运行 dev 看看效果吧！