vue 项目移动端 PC端自适应

一、安装淘宝插件   lib-flexible  

npm i -S amfe-flexible

main.js中引入  import 'lib-flexible' 

 

index.html的头部加入手机端适配的meta代码(以下二选一)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

 

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">

二、安装  px2rem-loader 

npm install px2rem-loader -S

在build 下的 utils.js 的 exports.cssLoaders 中配置

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 144  // 设计图的1/10
 } }

在 function generateLoaders (loader, loaderOptions)  中修改

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]

 

在项目中,px 会自动转换为 rem