vuejs添加環(huán)境常量----多環(huán)境開發(fā)打包場景解決方案之一

arashicage 發(fā)布于2019-08-22 17:19 / 3115人閱讀

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

2018/8/24更新：
目前VUE CLI 3.0 已經(jīng)提供環(huán)境變量配置了，建議直接使用。

前言

vue-cli構建的項目沒有angular-cli標配的environments環(huán)境依賴，只區(qū)分開發(fā)模式、單元測試模式和生產(chǎn)模式。

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

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

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

解決思路

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

具體實現(xiàn)

/config
添加env-config.js文件

"use strict"

const chalk = require("chalk")
/*
* 環(huán)境列表，第一個環(huán)境為默認環(huán)境
* envName: 指明現(xiàn)在使用的環(huán)境
* dirName: 打包的路徑，只在build的時候有用
* baseUrl: 這個環(huán)境下面的api 請求的域名
* assetsPublicPath: 靜態(tài)資源存放的域名，未指定則使用相對路徑
* */
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:"./"
    },

]

//獲取命令行參數(shù) 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,"") : ""
//沒有設置環(huán)境，則默認為第一個
const HOST_CONF = HOST_ENV  ? ENV_LIST.find(item => item.envName === HOST_ENV) : ENV_LIST[0] 
// 把環(huán)境常量掛載到process.env.HOST_ENV方便客戶端使用
process.env.BASE_URL = HOST_CONF.baseUrl
// log選中的變量
console.log(chalk.green("當前環(huán)境常量："))
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 + """
    })
  ],

具體使用

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

npm run dev --[envName]

指定環(huán)境打包,輸出至dist/[envName]

npm run build --[envName]

//打包測試環(huán)境

//本地調(diào)試生產(chǎn)環(huán)境

打包所有環(huán)境

/package.json “script"

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

目前發(fā)現(xiàn)的問題

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

GPU云服務器云服務器添加net環(huán)境添加java環(huán)境變量多租戶環(huán)境多線程環(huán)境

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95062.html

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

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

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

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

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

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

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

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

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

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

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