vue中移动端自适应方案

安装 lib-flexible

1、npm i lib-flexible

2、在项目入口文件 main.js 里 引入 lib-flexible

      import ‘lib-flexible’

3、添加meta标签  <meta name="viewport" content="width=device-width, initial-scale=1.0">

px 转 rem：安装px2rem-loader

1、npm i px2rem-loade

2、配置build/utils.js 

var cssLoader = {

　　loader: 'css-loader',

　　options: {

　　　　minimize: process.env.NODE_ENV === 'production',

　　　　sourceMap: options.sourceMap

　　}

}



var px2remLoader = {

　　loader: 'px2rem-loader',

　　options: {

　　　　remUnit: 75

　　}

}

function generateLoaders (loader, loaderOptions) {
　　const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

if (loader) {
　　loaders.push({
　　loader: loader + '-loader',
　　options: Object.assign({}, loaderOptions, {
　　sourceMap: options.sourceMap
　　})
　　})
　　}


if (options.extract) {
　　return ExtractTextPlugin.extract({
　　use: loaders,
　　fallback: 'vue-style-loader'
　　})
　　} else {
　　return ['vue-style-loader'].concat(loaders)
　　}
}

修改配置后需要重启，然后我们在组件中写单位直接写 px，设计稿量多少就可以写多少了