Vue 新增不參與打包的接口地址配置文件

Vue 新增不參與打包的接口地址配置文件

 

by:授客 QQ：1033553122

 

開發環境

 

Win 10

 

Vue 2.5.2

問題描述

vue工程項目，npm run build webpack方式打包，每次打包後若是須要更改後臺接口地址（項目中，接口地址設置成變量，存放在js文件中，須要用到的地方導入），都須要從新打包，比較麻煩，因此，想給項目增長個配置文件，打包後若是要更改接口地址，修改該文件便可。

解決方法

建立config.js

項目根目錄/static目錄下，建立config.js文件，內容以下：

;(function(env) {

    // 開發環境接口服務器地址

    const dev = {

        API_BASE_URL:"http://localhost:8000"

    }

 

    // 線上環境接口服務器地址

    const prod = {

        API_BASE_URL:"http://10.xxx.xx.xx:8001"

    }

 

    if (env == "dev") {

        return dev

    } else if (env == "prod") {

        return prod

    }

})("dev")

 

 

修改main.js

import axios from "axios"

 

...略

 

let myConfigPath = "/static/config.js"

 

if (process.env.NODE_ENV === "development") {

    myConfigPath = "../static/config.js"

}

 

axios.get(myConfigPath, { headers: { "Cache-Control": "no-cache" } }).then(response => {

  Vue.prototype.$apiBaseURL = eval(response.data).API_BASE_URL

 

  new Vue({

    el: "#app",

    router,

    store, // 注入 store

    components: { App },

    template: "<App/>"

  })

})

 

 

如上，先經過請求，獲取config.js文件內容 response.data，而後經過eval(response.data)文件內容當作代碼執行，進而獲取js中函數返回的內容，即咱們須要的配置，並掛載在Vue的prototype上，就能夠在每一個 Vue 的實例中使用。這裏把vue建立實例放在獲取config.js配置文件以後主要是由於axios異步請求的緣故。

 

注意，這裏不能不能使用import，必定要發起網絡請求，去請求這個js文件，不然build時，webpack會將此配置文件應當輸出的值寫死在壓縮以後的js中，以後去動手修改dist/static中的配置文件就不起做用了。

 

另外，添加{ headers: { "Cache-Control": "no-cache" } }請求頭，防止瀏覽器從磁盤緩存讀取，致使後臺更改了配置，前臺讀取的仍是舊的文件。

 

npm run build後，config.js位於dist/static目錄下，項目線上環境nginx 靜態文件路由關鍵配置以下：

location / {

            root /opt/TMP/frontend/dist; #這裏的dist存放的就是上述打包的路徑

...

 

實踐代表，使用nginx部署的狀況下，myConfigPath 不能設置爲 "./static/config.js"，只能設置爲myConfigPath = "/static/config.js"，即配置爲絕對路徑，不然刷新某些頁面的狀況下，會請求不到config.js

 

如下爲配置myConfigPath 爲 "./static/config.js"的狀況下，執行二級頁面的刷新操做(頁面URL：http://10.1xx.xx.xx/testerView/testCaseManagement，根據個人項目程序設計，此操做會先訪問二級路由頁面testerView），查看nginx日誌，發現以下，請求找不到：

 

 

引用配置

本例中，在本身封裝的axios.js中使用該配置

import axios from"axios"

 

import Vue from "vue"

 

...略

 

 

function request(options) {

    return new Promise((resolve, reject) => {

        const instance = axios.create({

        baseURL: Vue.prototype.$apiBaseURL,

 

        headers:config.headers,

        timeout:config.timeout,

        withCredentials:config.withCredentials,

        responseType:config.responseType

    })

    ...略