原文網址

http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/

1.安裝lib-flexible

npm i lib-flexible --save2.在專案入口檔案main.js中引入lib-flexible import 'lib-flexible/flexible.js'3.在專案根目錄的index.html 頭部加入手機端適配的meta的程式碼 <meta name="viewport" content ="width=device-width, initial-scale=1.0"> 4.安裝px2rem-loader在實際的開發中，使用flexible外掛時 會自動把px轉換成rem單位。在vue-cli中安裝過lib-flexible之後 ，將px轉換成rem，我們將使用px2rem這個工具， 它有webpack的loader： https://github.com/Jinjiang/px2rem-loader （這是px2rem-loader的github地址） 注：我這個步驟和頭部原文連結 所使用的方法 是不一樣的 ，因為我使用原文連結的命令時出錯了 ， 所以我使用了 github上面的安裝命令：npm install px2rem-loader

5.配置px2rem-loader

在vue-cli生成的webpack 配置中，vue-loader 的options和其他樣式檔案loader 最終都是由build/untils.js裡的一個方法生成的。

我們只需要在cssLoader後面加上一個px2remLoader即可，px2rem-loader的remUnit 選項意思是1rem=多少畫素，結合lib-flexible，我們將px2remLoader的option.remUnit 設定成設計稿寬度的1/10，這裡我們假設設計稿的寬度為750px ,並將px2remLoader 放進loaders陣列中

 var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }
  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

6.然後重啟後   在元件中寫單位直接寫px  然後在瀏覽器中的檢查就可以看到  單位是rem