一. 安裝外掛(lib-flexible 和 postcss-loader、postcss-px2rem)

npm i lib-flexible --save  

npm install postcss-loader postcss-px2rem --save

二. 配置外掛

　　1.在入口檔案main.js中引入lib-flexible (如:


import Vue from 'vue'
import App from './App'
import router from './router'

import 'lib-flexible';  //引入

　　 2. 在build/utils.js

exports.cssLoaders = function (options) {
  options = options || {}

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75,  //根據視覺稿，rem為px的十分之一，750px = 10rem (一般移動端設計圖750px)
      remPrecision: 2//換算的rem保留幾位小數點
    }
  }

}

然後!!!
把 const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
替換成  const loaders = [cssLoader, px2remLoader];

如下圖:

三. 效果圖

程式碼:

<template>
  <div id="home">
   
    <div class="box">我是效果圖</div>

    
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';
//box設定750px   然後就自動轉化成10rem了
.box 
 
{
  width: 750px;
  height: 300px;
  background: #ccc;
}
</style>