nuxt使用vant控件偏小,使用lib-flexible适配

1.安装插件

npm install postcss-pxtorem autoprefixer --save-dev
npm install amfe-flexible --save

2.在根目录的 plugins 目录下创建 lib-flexible.js ,内容如下:

import 'amfe-flexible'

3.在 nuxt.config.js 添加如下配置

module.exports = {
  ...
  head: {
    ...
    meta: [
      {
        charset: 'utf-8'
      },
      {
        name: 'viewport',
        content:
          'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'
      }
      ...
    }
    ...
  }
  ...
  plugins: [
      src: '~/plugins/lib-flexible.js',
      mode: 'client'
    }
  }
  ...
  build: {
    ...
    postcss: {
      plugins: {
        'postcss-pxtorem': {
          rootValue: 37.5,
          propList: ['*']
        }
      },
      preset: {
        autoprefixer: true
      }
    }
    ...
  }
}

在 package.json 中配置 browserslist:

{
  ...
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
  ...
}

参考自:
https://blog.csdn.net/fxss5201/article/details/104711613

你可能感兴趣的:(前端/框架/vue)