vuejs添加環境常量----多環境開發打包場景解決方案之一

arashicage 發布于2019-08-22 17:19 / 3113人閱讀

摘要：更新目前已經提供環境變量配置了，建議直接使用。前言構建的項目沒有標配的環境依賴，只區分開發模式單元測試模式和生產模式。更改環境需要手動修改解決思路利用對象，獲取啟動進程時的命令行參數匹配當前開發或生產的環境常量掛載到。

2018/8/24更新：
目前VUE CLI 3.0 已經提供環境變量配置了，建議直接使用。

前言

vue-cli構建的項目沒有angular-cli標配的environments環境依賴，只區分開發模式、單元測試模式和生產模式。

//config
dev.env.js
test.env.js
prod.env.js

一個項目的開發調試過程肯定不止開發環境和生產環境，由于缺少環境常量，開發人員常常需要手動修改BASE_URL，進而導致如果項目存在多個環境時，多出的環境沒辦法自動化構建。

axios.defaults.baseURL = "http://xxx.xxx.xx.xx/" //更改環境api需要手動修改

解決思路

利用process對象，獲取啟動Node.js進程時的命令行參數（process.argv）,匹配當前開發或生產的環境常量掛載到process.env。

具體實現

/config
添加env-config.js文件

"use strict"

const chalk = require("chalk")
/*
* 環境列表，第一個環境為默認環境
* envName: 指明現在使用的環境
* dirName: 打包的路徑，只在build的時候有用
* baseUrl: 這個環境下面的api 請求的域名
* assetsPublicPath: 靜態資源存放的域名，未指定則使用相對路徑
* */
const ENV_LIST = [
    {
        envName: "dev",
        dirName: "dev",
        baseUrl: "http://192.168.xx.xx:8000/",
        assetsPublicPath:"./"
    },
    {
        envName: "test",
        dirName: "test",
        baseUrl: "http://192.168.xx.xx:8000/",
        assetsPublicPath: "./"
    },
    {
        envName: "pro",
        dirName: "pro",
        baseUrl: "http://webapi.xxx.com/",
        assetsPublicPath:"./"
    },

]

//獲取命令行參數 http://nodejs.cn/api/process.html#process_process_argv
const argv = JSON.parse(process.env.npm_config_argv).original || process.argv
const HOST_ENV = argv[2] ? argv[2].replace(/[^a-z]+/ig,"") : ""
//沒有設置環境，則默認為第一個
const HOST_CONF = HOST_ENV  ? ENV_LIST.find(item => item.envName === HOST_ENV) : ENV_LIST[0] 
// 把環境常量掛載到process.env.HOST_ENV方便客戶端使用
process.env.BASE_URL = HOST_CONF.baseUrl
// log選中的變量
console.log(chalk.green("當前環境常量："))
console.log(HOST_CONF)

module.exports.HOST_CONF = HOST_CONF
module.exports.ENV_LIST = ENV_LIST

//build/webpack.base.conf.js 通過webpack傳入客戶端中

  plugins: [
    new webpack.DefinePlugin({
      "process.env.BASE_URL": """ + process.env.BASE_URL + """
    })
  ],

具體使用

指定開發時的環境，默認為dev環境，envName為config/env-config.js配置的環境常量，對應的process.env.BASE_URL的值就是對應的ENV_LIST中的baseUrl

npm run dev --[envName]

指定環境打包,輸出至dist/[envName]

npm run build --[envName]

//打包測試環境

//本地調試生產環境

打包所有環境

/package.json “script"

 "build-all": "npm run build --dev && npm run build --test && npm run build --pro"

目前發現的問題

命令行參數（process.argv）有保留關鍵字或者是被占用的，如prod,需要注意規避。

云服務器 GPU云服務器添加net環境添加java環境變量多租戶環境多線程環境

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95062.html

基于vue+mint-ui的mobile-h5的項目說明

摘要：把打包的目錄修改成生產環境需要的目錄。是域名的配置只要統一配置一項即可，方便。旨在增強團隊開發協作提高代碼質量和打造開發基石的編碼規范，以下規范是團隊基本約定的內容，必須嚴格遵循。 Vue作為前端三大框架之一，其已經悄然成為主流，學會用vue相關技術來開發項目會相當輕松。對于還沒學習或者還沒用過vue的初學者，基礎知識這里不作詳解，推薦先去相關官網，學習一下vue相關的基礎知識。 a...

vboy1010 2019-08-23 10:25 評論0 收藏0
Vue.js學習

摘要：一基礎學習模式下圖不僅概括了模式，還描述了在中是如何和以及進行交互的。關于這一點我們將在后續反應系統中討論。父組件通過向下傳遞數據給子組件，子組件通過給父組件發送消息。這個對象必須是普通對象原生對象，及原型屬性會被忽略。 Vue.js 是用于構建交互式的 Web 界面的庫。Vue.js 提供了 MVVM 數據綁定和一個可組合的組件系統，具有簡單、靈活的 API。其實和Jquery一樣...

TIGERB 2019-08-21 14:15 評論0 收藏0
架構師之路

摘要：因為用戶不用在第一次進入應用時下載所有代碼，用戶能更快的看到頁面并與之交互。譯高階函數利用和來編寫更易維護的代碼高階函數可以幫助你增強你的，讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數是至關重要的。 Vue 折騰記 - (10) 給axios做個挺靠譜的封裝(報錯,鑒權,跳轉,攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...

NikoManiac 2019-08-22 11:22 評論0 收藏0
VueJS 開發常見問題集錦

摘要：由于公司的前端開始轉向，最近開始使用這個框架進行開發，遇到一些問題記錄下來，以備后用。查了一下，發現可能是打包或是資源引用問題，目前該問題還未被妥善處理，需要通過一些來解決這個問題。為解決這個問題，中提供了方法對象受現 showImg(https://segmentfault.com/img/bVFgor?w=1280&h=720); 由于公司的前端開始轉向 VueJS，最近開始使用這...

hedge_hog 2019-08-20 18:07 評論0 收藏0
為什么我們要做三份 Webpack 配置文件

摘要：時至今日，已經成為前端工程必備的基礎工具之一，不僅被廣泛用于前端工程發布前的打包，還在開發中擔當本地前端資源服務器模塊熱更新等角色，結合等代碼檢查工具，還可以實現在對源代碼的嚴格校驗檢查。時至今日，Webpack 已經成為前端工程必備的基礎工具之一，不僅被廣泛用于前端工程發布前的打包，還在開發中擔當本地前端資源服務器（assets server）、模塊熱更新（hot module repla...

silencezwm 2019-04-23 13:43 評論0 收藏0