首页
前端开发
Webpack
Vue CLI移动端适配配置详解

Vue CLI移动端适配配置详解

0 次浏览 0 条评论
pdf
pdf

vue-cli 的移动端适配，用lib-flexible + px2rem-loader这套组合挺顺手的，适合想搞自适应布局的朋友。配置也不麻烦，几步搞定，效果也不错，适配主流机型没问题。

安装lib-flexible，npm install lib-flexible --save，在项目入口文件main.js里加一句：

import 'lib-flexible'

这一步相当于注入了一个动态的meta标签，会根据屏幕宽度自动设置html的font-size，配合rem单位用就行。

搞px2rem-loader。安装一下：

npm install px2rem-loader --save-dev

在vue.config.js里加上配置。大致长这样：

module.exports = {
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 37.5
          })
        ]
      }
    }
  }
}

remUnit这个值一般是设计稿宽度（比如 375）除以 10，具体看你团队怎么定。

要注意，某些三方 UI 库如果写死了px，你得配合postcss-plugin-viewport-units或者手动下。

相关资料也可以看看这些：

如果你刚上手移动端适配，先用这个方案练练手也不错，简单实用，出问题也好查。

pdf 文件大小：91.99KB