• 環境變數配置
• 跨域代理配置
• 總結
• 參考內容

環境變數配置

• 官方文件 https://cli.vuejs.org/zh/guide/mode-and-env.html#模式

• 在專案根目錄中新建.env, .env.production, .env.pre 等檔案

• NODE_ENV 和 BASE_URL 是兩個特殊變數，在程式碼中始終可用

• 一個環境檔案只包含環境變數的“鍵=值”對:

        .env                # 在所有的環境中被載入
        .env.local          # 在所有的環境中被載入，但會被 git 忽略
        .env.[mode]         # 只在指定的模式中被載入
        .env.[mode].local   # 只在指定的模式中被載入，但會被 git 忽略

 

• .env npm run serve 預設的本地開發環境配置

        // 預設的本地開發環境配置 每行後面不要加結束分號

        NODE_ENV = "development"

        BASE_URL = "./"

        // 打包後文件夾名字;預設dist;要在vue.config.js 中配置
        // 只有以 VUE_APP 開頭的變數會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中，程式碼中可以通過 process.env.VUE_APP_BASE_API 訪問 這樣定義的值
        // 在  vue.config.js 中可以獲取到 outputDir ,但是在客戶端程式碼中無法獲取;
        outputDir = "dist"

        VUE_APP_API = "http://v.juhe.cn/joke"

 

• .env.production npm run build 預設的環境配置（正式伺服器）

        // build 預設的環境配置（正式伺服器）每行後面不要加結束分號

        NODE_ENV = "production"

        BASE_RUL = "./"

        // 打包後文件夾名字;要在vue.config.js 中配置
        outputDir = "dist_pro"

        // 自定義的一些在客戶端要獲取的變數要以 VUE_APP_  開頭 不然無法獲取到;
        VUE_APP_OUT_PUTDIR = "dist_pro"

        VUE_APP_API = "http://www.xxxx.com/api"

 

• .env.pre npm run pre 自定義 build 環境配置（預發伺服器）

    //自定義 build 環境配置（預發伺服器）每行後面不要加結束分號

    NODE_ENV = "production"

    BASE_URL = "./"

    // 打包後文件夾名字; 要在vue.config.js 中配置
    outputDir = "dist_pre"

    VUE_APP_API = "http://www.自定義環境.com"  

• package.json 一個模式有多中變數;

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint":  "vue-cli-service lint",
    "pre":   "vue-cli-service build --mode pre"
  }
  注意模式不同於 NODE_ENV，一個模式可以包含多個環境變數。也就是說，每個模式都會將 NODE_ENV 的值設定為模式的名稱——比如在 development 模式下 NODE_ENV 的值會被設定為 "development"。

  你可以通過為 .env 檔案增加字尾來設定某個模式下特有的環境變數。比如，如果你在專案根目錄建立一個名為 .env.development 的檔案，那麼在這個檔案裡宣告過的變數就只會在 development 模式下被載入。

  你可以通過傳遞 --mode 選項引數為命令列覆寫預設的模式。例如，如果你想要在構建命令中使用開發環境變數，請在你的 package.json 指令碼中加入：
  "dev-build": "vue-cli-service build --mode development",

• index.vue

// index.vue  獲取最新的笑話
axios.get("/api/content/text.php",
        {   baseURL:process.env.NODE_ENV=="development"?'/':process.env.VUE_APP_API,
            params:{key:'19a578542216aeb8a23ccf5b05a61449'},
            headers:{'Content-Type':'application/json;charset=UTF-8'}
        })
    .then(res=>{
        console.log('text result',res);
    })

• http.js

// axios 封裝,(示例demo 所以引數寫死的);
// 本地開發環境的話要使用 devServer 代理來跨域 所以  "development" 時 baseURL 設定為 "/";
app.ajax = (url,method)=>{
  return axios({
       url:url,
       baseURL:process.env.NODE_ENV=="development"?'/':process.env.VUE_APP_API,
       method:method,
       params:{
           key:'19a578542216aeb8a23ccf5b05a61449'
       },

       data:{
           sort:'desc',
           page:1,
           pagesize:10,
           time:parseInt( new Date().getTime()/1000),
           key:'19a578542216aeb8a23ccf5b05a61449'
       },
       headers:{'Content-Type':'application/json;charset=UTF-8'},

   })
}

export default app;

跨域代理配置

• 本地開發時會涉及到跨域問題;至於在服務端 請加跨域請求頭

• vue.config.js devServer 配置

module.exports  = {
    outputDir:process.env.outputDir || 'dist',

    // 由於瀏覽器有跨域限制,這裡cli 工具提供了 啟動本地代理伺服器 請求
    devServer:{
        open:false,      // 是否開啟瀏覽器;
        hotOnly:true,    // 是否熱更新;

        proxy:{
            '/api':{   // 路徑中有 /api 的請求都會走這個代理 , 可以自己定義一個,下面移除即可
                target:'http://v.juhe.cn/joke',    // 目標代理介面地址,實際跨域要訪問的介面,這個地址會替換掉 axios.defaults.baseURL
                secure:false,
                changeOrigin:true,  // 開啟代理，在本地建立一個虛擬服務端
                ws:true,       // 是否啟用  websockets;
                pathRewrite:{   // 去掉 路徑中的  /api  的這一截
                    '^/api':''
                }
            },

            '/test':{
                target:'http://v.juhe.cn/joke',   // 目標代理介面地址,實際跨域要訪問的介面,這個地址會替換掉 axios.defaults.baseURL
                secure:false,
                changeOrigin:true,
                ws:true,
                pathRewrite:{
                    '^/test':'',
                }
            }
        
        },

    }



}

總結

1. 代理配置 時 配置的主機地址 （即 baseURL） 應該為 "/"; 參考 http.js
2. 真時的地址為 在 vue.config.js 中配置; 參考 vue.config.js 中 devServer 配置項
3. 真時的介面地址為 'http://v.juhe.cn/joke/content/text.php'
4. 瀏覽器看到的 地址 為 Request URL: http://localhost:8080/api/content/text.php?key=19a578542216aeb8a23ccf5b05a61449

參考內容

1. https://segmentfault.com/q/1010000022185695
2. https://cli.vuejs.org/zh/guide/mode-and-env.html#模式
3. https://github.com/chimurai/http-proxy-middleware