cli3 px转rem适配移动端_Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

今天，我们使用vue cli3 做一个移动端适配 。

前言

首先确定你的项目是vue cli3版本以上的。

一、移动端适配包

1、安装移动端适配包

npm i lib-flexible -s

2、在 main.js 引入适配包

import vue from 'vue'

import app from './app.vue'

import 'lib-flexible' // 引入适配包

vue.config.productiontip = false

new vue({

render: h => h(app),

}).$mount('#app')

3、在 index.html 编辑 viewport

we're sorry but doesn't work properly without javascript enabled. please enable it to continue.

二、css样式适配

1、安装 px2rem-loader 包( 只适用于css样式 )

npm i px2rem-loader -d

2、在 vue.config.js 配置

module.exports={

chainwebpack: conf