vue quasar 透過process.env動態傳遞變數到web內

使用qusar建立vue網頁

可透過執行quasar dev執行或quasar build產生編譯檔案

如果希望可以

例如透過產生quasar build產生開發區或正式區的網站內容

但測試區與正式區取用資料的api是不相同的

希望可以透過

stage=master quasar build 建立正式區網頁

stage=develop quasar build 建立測試測網頁

在指令列上設定的環境變數stage

要如何讀取並轉換成在網頁上可讀取到?

在執行quasar cli 也就是nodejs

會載入quasar.conf.js

在這裡可以使用process.env.stage拿到在cli上設定的stage值

只要帶到 build的env下即可以在web內使用

ex

quasar.conf.js

module.exports = configure(function (ctx) {

  return {

    ..

    build: {

      env: {

        stage: process.env.stage

      },

      ..

    }

  }

在vue頁面或前端的js內

可以用process.env.stage

這邊要注意

quasar.conf.js

內的process.env是nodejs的環境變數

vue內的

process.env是 前端頁面拿到的設定變數