Nuxt引用vant+px2rem适配移动端开发

安装vant

npm i vant -S //安装vant
npm i babel-plugin-import -D //按需引入

在plugins文件夹新增vant.js文件
引入Button组件为例

import Vue from "vue";
import {
    
    
  Button
} from "vant";
Vue.use(Button);

在nuxt.config.js文件进行配置

  plugins: [
    '@/plugins/vant'
  ],
   build: {
    
    
    transpile: [/vant.*?less/],
    babel: {
    
    
      plugins: [
        [
          'import',
          {
    
    
            libraryName: 'vant',
            style: (name) => {
    
    
              return `${
      
      name}/style/less.js`
            }
          },
          'vant'
        ]
      ]
    }
  }

安装px2rem

npm i lib-flexible -s
npm i postcss-px2rem-exclude -s

在plugins文件夹新建lib-flexible.js文件

import 'lib-flexible'

在nuxt.config.js文件进行配置

  plugins: [{
    
    
      src: '@/plugins/lib-flexible',
      ssr: false //不设置会报错
    },
    '@/plugins/vant'
  ],

  build: {
    
    
    postcss: {
    
    
      plugins: {
    
    
        'postcss-px2rem-exclude': {
    
    
          remUnit: 75, // 设计图为750 * height
          remPrecision: 2, // rem的小数点后位数
          exclude: /node_modules|folder_name/i //取消vant组件css转成rem
        }
      }
    },
  }