vue/cli3.+创建的项目移动端兼容，vue/cli3.+创建的项目使用lib-flexible做移动端项目兼容，lib-flexible做H5移动端兼容

项目使用的 VUE，cli 3.+ webpack 模板，没使用 VUE 的请 【看这里：原生html页面使用lib-flexible】

如果使用的 VUE，cli 2.+ webpack 模板 【vue项目移动端兼容，vue项目使用lib-flexible做移动端项目兼容，lib-flexible做H5移动端兼容】

使用 cli2.+ 创建的项目并使用 lib-flexable 做过移动端兼容的都知道，要用 px2rem-loader 去转换单位，其实并不是非用 px2rem-loader 只需结合一个 px2rem 的工具就行，这里使用的是 postcss 提供的插件，叫 postcss-plugin-px2rem

安装依赖：

npm install lib-flexable --save
npm install postcss-plugin-px2rem -D

lib-flexable 还是和以前一样直接引入即可

import 'lib-flexible/flexible.js'

重点在配置 postcss-plugin-px2rem

在 vue.config.js(如果没有请自行在项目根目录创建) 里边配置：postcss-plugin-px2rem

module.exports = {
    
    
  publicPath: './',
  devServer: {
    
    
	  proxy: {
    
    
		  '^/api':{
    
    
			  target: 'https://aaa.com',
			  wx: false,
			  changeOrigin: true,
			  pathRewrite: {
    
    
				  '^/api': '/api'
			  }
		  }
	  }
  },
  css: {
    
    
	  loaderOptions: {
    
    
		  postcss: {
    
    
			  plugins: [
				  require('postcss-plugin-px2rem')({
    
    
					  rootValue: 75, // 看自己项目进行修改，在 px2rem-loader 里边叫 remUint
					  exclude: /(node_modules)/,
					  mediaQuery: true
				  })
			  ]
		  }
	  }
  }
}

看看运行效果：