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