Vue全家桶，build打包不一樣環境下對應不一樣的url

Vue區分開發環境和生產環境不一樣的url

假設有一個請求，由base_url和接口路徑組成
    like this:
        http://127.0.0.1:8066/dologin
            http://127.0.0.1:8066是base_url
            /dologin是接口路徑

通常地，在測試環境、開發環境以及生產環境，接口的路徑都是一致的，
    區別在於base_url的不一樣。

所以，能夠作點手腳，讓base_url根據當前所處的環境進行賦不一樣值。

    在nodejs中存在一個對象，名爲process，自己process是內置於nodejs中，
    webpack對其進行了處理，將這個對象寫入到了html的執行環境中，
    所以咱們能夠在js中訪問到process對象。
        process.env.NODE_ENV 即爲咱們但願知曉的當前環境
            npm run dev ——> process.env.NODE_ENV == "development"
            npm run build ——> process.env.NODE_ENV == "production"
        Tips：應當注意的是，js中訪問的process對象和node中的process對象不是同一個。
        js中訪問到的process是一個假的process。

    基於此，咱們建立一個文件config.js
        置於assets文件夾中。

        /assets/config.js
            const _config = {
              base_url : "",
            }
            if(process.env.NODE_ENV == "development"){
              _config.base_url = "http://127.0.0.1:8080";
            }else if(process.env.NODE_ENV == "production"){
              _config.base_url = "http://127.0.0.1:8123";
            }

            export default {
              ..._config
            }

    而後在main.js中引入
        main.js
            import Vue from "vue";
            import App from './App';
            import router from './router';
            ...
            import __CONFIG__ from "./assets/config.js";
            Vue.prototype.CONFIG = __CONFIG__

            new Vue({
                el: '#app',
                router,
                components: { App },
                template: '<App/>'
            });

    至此便區分了dev環境和prod環境（好像其實沒啥大用處）；

進一步探討

剛剛咱們區分了npm run dev 和 npm run build 兩個場景下的不一樣的url，
這樣處理咱們達到了這麼一個目的：
    在本地開發的時候，調用的接口是測試環境；
    當咱們build的時候，產生的代碼調用的接口則是生產環境。

其實這跟實際的項目開發流程是相違背的，
    現實的開發流程是：
        一、本地開發調用測試環境的接口；
        二、而後本地的代碼開發完畢，build的代碼部署到測試環境，供測試同事測試；
        ————此時，本地npm run dev和npm run build，調用的接口其實都是測試接口。
            區分開，意義不大。
        三、接着，測試環境測試經過後，將測試環境部署到生產環境，也就是上線。
            這個時候，就須要將測試環境的url和生產環境的url區分開了。
    
所以咱們的需求應當是這樣的：
    一、我擁有兩種build的方式，一種build後跑在測試環境，一種build後跑在生產環境；
    二、經過這兩種build，我調用的接口url前綴不一樣。

再進一步推演，假設我調用了一個接口，
    在測試環境接口url爲 http://test.xxx.com/dologin
    在生產環境接口url爲 http://api.xxx.com/dologin
    而後通常咱們會這樣去寫url：
        var base_url = "http://test.xxx.com";
        var url = base_url + "/dologin";

    base_url通常咱們會另起一個js文件來保存，假設叫作config.js

普通的操做

使用git進行代碼版本管理，假設有兩個分支，第一個分支叫作dev，表明測試環境；
                                    第二個分支叫作prod，表明生產環境；
每一次上線更新生產環境的版本，由dev環境的代碼merge到prod分支；

那麼，假設我當前處於dev分支，
    一、建立一個config.js在/static文件夾裏面，這可以使它不會被webpack壓縮，

    二、/static/config.js中，寫入，var url = "http://127.0.0.1:5678";

    三、接着，我將dev分支的config.js的改動，merge到prod，
        這時候prod也有這個/static/config.js了，
        而且裏面的內容爲 var url = "http://127.0.0.1:5678";

    四、接下來開始對兩個分支進行區分，
        基於prod建立一個prod-config分支，裏面對/static/config.js進行改動，
        改爲var url = "http://127.0.0.1:1234";
        提交，將prod-config分支合併到prod。

    五、接下來，基於dev進行開發便可，該幹嗎幹嗎；

    只要/static/config.js中的內容再也不進行改動，就能夠一直維持兩個環境的url不一樣
            dev分支的config.js裏的url爲http://127.0.0.1:5678，
            prod分支的config.js裏的url爲http://127.0.0.1:1234。

兩個須要注意的點：
    一、config.js在上述過程完成以後，不能再改動，一個空格也不要加。
        萬一改動了，上面的步驟重走一遍，
        dev分支merge到prod，prod分支上改config.js，提交。
    二、分支之間的合併，應該嚴格保證，是由dev ——> prod，而不能相反；
        基於dev開發，建立分支，而後開發完成將分支合併到dev，再由dev合併到prod；

這不QingZhen（手動滑稽），有沒有自動一點的操做？

固然是改webpack的配置文件。
咱們使用cross-env來設置環境變量。

    npm i cross-env --save-dev

定義命令：

package.json

{  
    ...,
    "scripts":{
        ...,
        "build:prod": "cross-env NODE_ENV=production node build/build.js --env=production",
        "build:dev": "cross-env NODE_ENV=development node build/build.js --env=development"
    },
    ...
}
Tips：npm run build:prod，打包prod的代碼，NODE_ENV這個變量值爲production;
    npm run build:dev，打包dev的代碼，NODE_ENV這個變量值爲development;

/build/build.js

'use strict'
require('./check-versions')()
// process.env.NODE_ENV = 'production' //這一句註釋掉，
 
...
// const webpackConfig = require('./webpack.prod.conf'); // 這句註釋掉
var webpackConfig;  // webpack config file

if(process.env.NODE_ENV === "production"){
  webpackConfig = require("./webpack.build-prod.conf.js");
}else if(process.env.NODE_ENV === "development"){
  webpackConfig = require("./webpack.build-dev.conf.js");
}else{
  console.log("Cant find process.env.NODE_ENV，please confirm");
  return;
}

const spinner = ora('building for '+process.env.NODE_ENV+'...')
spinner.start()

...

/build/webpack.build-prod.conf.js

//webpack.build-prod.conf.js和webpack.build-dev.conf.js，
//由webpack.prod.conf.js複製來就行。
//裏面改點東西，改個env就行

...
const env = const env = process.env.NODE_ENV === 'production'
      ? require('../config/prod.env.js')
      : require('../config/dev.env.js');
...

//這裏有倆js，prod.env和dev.env，這倆是啥，往下看

/config/prod.env.js和/config/dev.env.js

/config/prod.env.js
    'use strict'
    module.exports = {
        NODE_ENV: '"production"',
        HOST_URL:'"http:127.0.0.1:8765"'
    }

/config/dev.env.js
    'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')

    module.exports = merge(prodEnv, {
        NODE_ENV: '"development"',
        HOST_URL:'"http:127.0.0.1:8888"'
    })

//很明顯，這裏的就是咱們所知道的，不一樣環境下不一樣的參數了。
//  在development環境，將會使用dev.env.js文件，
//  在production環境，將會使用prod.env.js文件，
//        這兩個文件裏面都有NODE_ENV和HOST_URL兩個參數。

Tips：注意，在prod.env.js和dev.env.js裏面，他們的值，要包裹兩個引號。
    一個大的一個小的，或者倆大的，而後用轉義符區分。
    不這麼作會報錯。
        eg:
            HOST_URL:'"http:127.0.0.1:8765"'
            HOST_URL:"\"http:127.0.0.1:8765\""

也就是所謂的，命令不同，可是生成的參數不同，目的達到。
若是有一些別的參數想加進去，都是能夠加的，保證兩個文件擁有的屬性一致就行。

如何引用？

仍是老辦法，訪問process這個對象就好了。
    /src/main.js
        //main.js can get info of process.env , test
        console.log(process.env.HOST_URL);
        console.log(process.env.NODE_ENV);

大功告成

一、引入，個人作法是把prod.env.js/dev.env.js裏面的參數寫進了Vue的原型裏
        
        import Vue from 'vue';

        Vue.prototype.CONFIG = {
            BASE_URL:process.env.HOST_URL
        }
    
二、使用
        在組件中，好比App.vue文件裏，
        使用 this.CONFIG.HOST_URL 便可訪問到咱們定義的 url了。

三、最終效果
    npm run build:prod
        生成的代碼在dist文件夾中，表明了production環境，
            this.CONFIG.HOST_URL 爲 "http:127.0.0.1:8765"

    npm run build:dev
        生成的代碼在dist文件夾中，表明了development環境，
            this.CONFIG.HOST_URL 爲 "http:127.0.0.1:8888"