利用vue-cli建立專案，保證index.html中

 <meta name="viewport" content="width=device-width,initial-scale=1.0">

首先要轉換要依賴於 px2rem-loader和lib-flexible模組

npm i px2rem-loader lib-flexible -D

然後去main.js中引入

import 'lib-flexible/flexible'

再去腳手架搭建的build目錄下找到utils.js中配置

 const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75     //這個75是設計圖的十分之一，如設圖是750，即是75，設計圖640，即,64
    }
  };


 function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]//此處新增px2remLoader即可

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

最後npm run dev執行即可

注：引入的外部css是無法轉換單位的，如import引入的，只能轉元件中style中的px,如果不想讓某些px單位轉換，px寫成大寫PX  那麼此PX不會轉成rem