vue-cli4.0多環(huán)境配置變量與模式詳解
vue-cli2.x還是vue-cli4.x模式的多環(huán)境變量配置方法（忘了）。
1.在package.json文件中
"scripts": {
"dev": "cross-env APP_ENV=dev node build/dev-server.js",
"devTH": "cross-env APP_ENV=tianhe node build/dev-server.js",
"build:prod": "cross-env APP_ENV=dev NODE_ENV=production node build/build.js",
"buildTH:prod": "cross-env APP_ENV=tianhe NODE_ENV=production node build/build.js",
"lint": "eslint --ext .js,.vue src"
},
2、在src目錄下，新建文件夾用于存放環(huán)境變量。
我的項(xiàng)目下，在src中新建文件夾envConfig文件夾，在index.js里面判斷項(xiàng)目啟動(dòng)的環(huán)境，引入對(duì)應(yīng)的環(huán)境變量文件
js文件代碼：
const comConfig = {
projectName: '智感安防大腦'
}
let config = {}
// 此處若找不到文件，則會(huì)報(bào)錯(cuò)
try {
if (process.env.APP_ENV) {
config = require('./modules/' + process.env.APP_ENV + '.js').default
}
} catch (e) {
console.log('找不到指定的環(huán)境變量文件')
}
Object.assign(comConfig, config)
// console.log('comConfig')
// console.log(comConfig)
export default comConfig
modules里面存放的是各環(huán)境下的常量值。例如/modules/tianhe.js文件的代碼如下：
export default {
// 公共信息
defaultFaceScore: 95.8, // 人臉閾值搜索
mapRefreshTime: 1000 * 60, // 地圖首頁定時(shí)刷新時(shí)間
hangDataStartTimeConf: '2020-01-01', // 地圖首頁，歷史至今的數(shù)據(jù)查詢。定義歷史數(shù)據(jù)開始時(shí)間
closeAlramDialogTime: 1000 * 60 * 5, // 告警彈窗，定時(shí)關(guān)閉
realFlowRefreshTime: '1000*10', // 實(shí)有人口管理，數(shù)據(jù)展示，小區(qū)感知數(shù)據(jù)實(shí)時(shí)采集量，定時(shí)刷新數(shù)據(jù)
doorDeviceInfoDialog: 1000 * 60 * 5, // 地圖首頁,關(guān)閉門禁機(jī)彈窗的時(shí)間
}
3、在main.js中引入環(huán)境變量下的index.js文件，并vue的原型上進(jìn)行定義
// 引入多環(huán)境變量參數(shù) import envConfig from './envConfig/index' Vue.prototype.$envConfig = envConfig
4、定義完成后，在頁面使用如下：
頁面輸入： this.$envConfig.defaultFaceScore，即可得到環(huán)境變量值
======================更新于2020.06.23，end=========================
環(huán)境變量和模式
不同環(huán)境變量下的文件類型
.env # 在所有的環(huán)境中被載入 .env.local # 在所有的環(huán)境中被載入，但會(huì)被 git 忽略 .env.[mode] # 只在指定的模式中被載入 .env.[mode].local # 只在指定的模式中被載入，但會(huì)被 git 忽略
為一個(gè)特定模式準(zhǔn)備的環(huán)境文件的 (例如.env.production) 將會(huì)比一般的環(huán)境文件 (例如.env) 擁有更高的優(yōu)先級(jí)。因此，Vue CLI 啟動(dòng)時(shí)已經(jīng)存在的環(huán)境變量擁有最高優(yōu)先級(jí)，并不會(huì)被.env文件覆寫。
進(jìn)入特定模式下的環(huán)境，需要先在package.json文件下定義命令，其中使用--mode去指定特點(diǎn)的模式。
"scripts": {
"serve": "vue-cli-service serve",
"serveYT": "vue-cli-service serve --mode yuntong",
"build": "vue-cli-service build",
"buildYT": "vue-cli-service build --mode yuntong",
"lint": "vue-cli-service lint"
},
例如，要進(jìn)入到y(tǒng)untong環(huán)境下的開發(fā)模式，則啟動(dòng)命令： npm run serveYT
模式是 Vue CLI 項(xiàng)目中一個(gè)重要的概念。默認(rèn)情況下，一個(gè) Vue CLI 項(xiàng)目有三個(gè)模式：development 、production 、test 。
注意模式不同于 NODE_ENV，一個(gè)模式可以包含多個(gè)環(huán)境變量。也就是說，每個(gè)模式都會(huì)將 NODE_ENV 的值設(shè)置為模式的名稱——比如在 development 模式下 NODE_ENV 的值會(huì)被設(shè)置為 "development"。
你可以通過為 .env 文件增加后綴來設(shè)置某個(gè)模式下特有的環(huán)境變量。比如，如果你在項(xiàng)目根目錄創(chuàng)建一個(gè)名為 .env.yuntong 的文件，那么在這個(gè)文件里聲明過的變量就只會(huì)在 yuntong 模式下被載入。
你可以通過傳遞 --mode 選項(xiàng)參數(shù)為命令行覆寫默認(rèn)的模式。例如，如果你想要在構(gòu)建命令中使用開發(fā)環(huán)境變量，請(qǐng)?jiān)谀愕?package.json 腳本中加入："buildYT": "vue-cli-service build --mode yuntong"。
在客戶端側(cè)代碼中使用環(huán)境變量
使用env配置文件
在根目錄下定義了多個(gè).env文件。分別為：.env，.env.production，.env.yuntong
其中，要.vue頁面可以直接使用的常量命名需要以VUE_APP_開頭，例如VUE_APP_SECRET
在官網(wǎng)上有這么一段話說明：
只有以 VUE_APP_ 開頭的變量會(huì)被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中。你可以在應(yīng)用的代碼中這樣訪問它們：console.log(process.env.VUE_APP_SECRET)。
除了 VUE_APP_* 變量之外，在你的應(yīng)用代碼中始終可用的還有兩個(gè)特殊的變量：
- NODE_ENV - 會(huì)是 "development"、"production" 或 "test" 中的一個(gè)。具體的值取決于應(yīng)用運(yùn)行的模式。
- BASE_URL - 會(huì)和 vue.config.js 中的 publicPath 選項(xiàng)相符，即你的應(yīng)用會(huì)部署到的基礎(chǔ)路徑。
所有解析出來的環(huán)境變量都可以在 public/index.html 中以 HTML 插值中介紹的方式使用。
例如頁面.env.yuntong文件定義兩個(gè)參數(shù)
NODE_ENV = "yuntong"<br>VUE_APP_MAPPORT = "8093" PORT=9000
在main.js中直接打?。簑indow.console.log(process.env)，則發(fā)現(xiàn)打印出的內(nèi)容為：
BASE_URL: "/" NODE_ENV: "yuntong" VUE_APP_MAPPORT: ""8093"
NODE_ENV和BASE_URL參數(shù)是始終存在的兩個(gè)變量，NODE_ENV 若不定義，則默認(rèn)為develop。變量VUE_APP_MAPPORT是以VUE_APP開頭的，可以直接在頁面中獲取。而PORT則不可以直接在頁面中獲取。
PORT的使用，雖然不可以直接在應(yīng)用代碼中自己使用，但是在vue.config.js中可以直接獲取。
在vue.config.js中定義：
module.exports = {
devServer:{
port: 8000
}
}
項(xiàng)目啟動(dòng)后，訪問地址不是8000端口，而是8093端口，說明在yuntong環(huán)境下，.env.yuntong文件定義的變量PORT生效了（測(cè)試發(fā)現(xiàn)不區(qū)分大小寫，js文件定義port或者PORT都生效）
至于其他的一些非VUE_APP_*的變量，如何使用，暫時(shí)沒有發(fā)現(xiàn)，也沒有查閱到相關(guān)的文檔，后續(xù)繼續(xù)補(bǔ)充說明。
########################以下{}補(bǔ)充于2020年01年03日######################來源：在vue.config.js文件中打印輸出process.env即可得出
{
ALLUSERSPROFILE: '',
APPDATA: '',
BABEL_ENV: '',
CommonProgramFiles: '',
CommonProgramFiles(x86): '',
CommonProgramW6432: '',
COMPUTERNAME: '',
ComSpec: '',
DriverData: '',
ERLANG_HOME: '',
FPS_BROWSER_APP_PROFILE_STRING: '',
FPS_BROWSER_USER_PROFILE_STRING: '',
HOME: '',
HOMEDRIVE: ':',
HOMEPATH: '',
INIT_CWD: '',
JAVA_HOME: '',
LOCALAPPDATA: '',
LOGONSERVER: '',
MAP_IP: '',
MAP_PORT: '',
NODE: '',
NODE_ENV: '',
NODE_EXE: '',
NPM_CLI_JS: '',
npm_config_access: '',
npm_config_allow_same_version: '',
npm_config_also: '',
npm_config_always_auth: '',
npm_config_argv: '',
npm_config_audit: '',
npm_config_audit_level: '',
npm_config_auth_type: '',
npm_config_before: '',
npm_config_bin_links: '',
npm_config_browser: '',
npm_config_ca: '',
npm_config_cache: '',
npm_config_cache_lock_retries: '',
npm_config_cache_lock_stale: '',
npm_config_cache_lock_wait: '',
npm_config_cache_max: '',
npm_config_cache_min: '',
npm_config_cafile: '',
npm_config_cert: '',
npm_config_cidr: '',
npm_config_color: '',
npm_config_commit_hooks: '',
npm_config_depth: '',
npm_config_description: '',
npm_config_dev: '',
npm_config_dry_run: '',
npm_config_editor: '',
npm_config_engine_strict: '',
npm_config_fetch_retries: '',
npm_config_fetch_retry_factor: '',
npm_config_fetch_retry_maxtimeout: '',
npm_config_fetch_retry_mintimeout: '',
npm_config_force: '',
npm_config_git: '',
npm_config_git_tag_version: '',
npm_config_global: '',
npm_config_globalconfig: '',
npm_config_globalignorefile: '',
npm_config_global_style: '',
npm_config_group: '',
npm_config_ham_it_up: '',
npm_config_heading: 'npm',
npm_config_https_proxy: '',
npm_config_if_present: '',
npm_config_ignore_prepublish: '',
npm_config_ignore_scripts: '',
npm_config_init_author_email: '',
npm_config_init_author_name: '',
npm_config_init_author_url: '',
npm_config_init_license: '',
npm_config_init_module: '',
npm_config_init_version: '',
npm_config_json: '',
npm_config_key: '',
npm_config_legacy_bundling: '',
npm_config_link: '',
npm_config_local_address: '',
npm_config_loglevel: '',
npm_config_logs_max: '',
npm_config_long: '',
npm_config_maxsockets: '',
npm_config_message: '',
npm_config_metrics_registry: ',
npm_config_node_gyp: '',
npm_config_node_options: '',
npm_config_node_version: '',
npm_config_noproxy: '',
npm_config_offline: '',
npm_config_onload_script: '',
npm_config_only: '',
npm_config_optional: '',
npm_config_otp: '',
npm_config_package_lock: '',
npm_config_package_lock_only: '',
npm_config_parseable: '',
npm_config_prefer_offline: '',
npm_config_prefer_online: '',
npm_config_prefix: '',
npm_config_preid: '',
npm_config_production: '',
npm_config_progress: '',
npm_config_proxy: '',
npm_config_read_only: '',
npm_config_rebuild_bundle: '',
npm_config_registry: '',
npm_config_rollback: '',
npm_config_save: '',
npm_config_save_bundle: '',
npm_config_save_dev: '',
npm_config_save_exact: '',
npm_config_save_optional: '',
npm_config_save_prefix: '^',
npm_config_save_prod: '',
npm_config_scope: '',
npm_config_scripts_prepend_node_path: '',
npm_config_script_shell: '',
npm_config_searchexclude: '',
npm_config_searchlimit: '',
npm_config_searchopts: '',
npm_config_searchstaleness: '',
npm_config_send_metrics: '',
npm_config_shell: '',
npm_config_shrinkwrap: '',
npm_config_sign_git_commit: '',
npm_config_sign_git_tag: '',
npm_config_sso_poll_frequency: '',
npm_config_sso_type: '',
npm_config_strict_ssl: '',
npm_config_tag: '',
npm_config_tag_version_prefix: '',
npm_config_timing: '',
npm_config_tmp: '',
npm_config_umask: '',
npm_config_unicode: '',
npm_config_unsafe_perm: '',
npm_config_update_notifier: '',
npm_config_usage: '',
npm_config_user: '',
npm_config_userconfig: '',
npm_config_user_agent: '',
npm_config_version: '',
npm_config_versions: '',
npm_config_viewer: '',
npm_execpath: '',
npm_lifecycle_event: '',
npm_lifecycle_script: '',
npm_node_execpath: '',
npm_package_browserslist_0: '',
npm_package_browserslist_1: '',
npm_package_dependencies_core_js: '',
npm_package_dependencies_svg_sprite_loader: '',
npm_package_dependencies_vue: '',
npm_package_description: '',
npm_package_devDependencies_babel_eslint: '',
npm_package_devDependencies_eslint: '',
npm_package_devDependencies_eslint_plugin_vue: '',
npm_package_devDependencies_vue_template_compiler: '',
npm_package_devDependencies__vue_cli_plugin_babel: '',
npm_package_devDependencies__vue_cli_plugin_eslint: '',
npm_package_devDependencies__vue_cli_service: '',
npm_package_eslintConfig_env_node: '',
npm_package_eslintConfig_extends_0: '',
npm_package_eslintConfig_extends_1: '',
npm_package_eslintConfig_parserOptions_parser: '',
npm_package_eslintConfig_root: '',
npm_package_eslintConfig_rules_no_console: '',
npm_package_name: '',
npm_package_private: '',
npm_package_readmeFilename: '',
npm_package_scripts_build: '',
npm_package_scripts_build001: '',
npm_package_scripts_build002: '',
npm_package_scripts_buildYT: '',
npm_package_scripts_lint: '',
npm_package_scripts_serve: '',
npm_package_scripts_serve001: '',
npm_package_scripts_serve002: '',
npm_package_scripts_serveYT: '',
npm_package_version: '',
NPM_PREFIX_NPM_CLI_JS: '',
NUMBER_OF_PROCESSORS: '',
NVM_HOME: '',
NVM_SYMLINK: '',
OneDrive: '',
OS: '',
Path: '',
PATHEXT: '',
PORT: '',
PROCESSOR_ARCHITECTURE: '',
PROCESSOR_IDENTIFIER: '',
PROCESSOR_LEVEL: '',
PROCESSOR_REVISION: '',
ProgramData: '',
ProgramFiles: '',
ProgramFiles(x86): '',
ProgramW6432: '',
PROMPT: '',
PSModulePath: '',
PUBLIC: '',
SESSIONNAME: '',
SystemDrive: ':',
SystemRoot: '',
TEMP: '',
TMP: '',
UATDATA: '',
USERDNSDOMAIN: '',
USERDOMAIN: '',
USERDOMAIN_ROAMINGPROFILE: '',
USERNAME: '',
USERPROFILE: '',
windir: ''
}
使用js配置
由于在實(shí)際開發(fā)過程中，可能需要的環(huán)境比較多，例如4,5個(gè)。直接在根目錄下創(chuàng)建.env.XXX文件，顯得整個(gè)項(xiàng)目結(jié)構(gòu)變大也沒有條理，因此考慮把不同環(huán)境下的變量文件歸類到j(luò)s中進(jìn)行配置?；蛘叻旁谝粋€(gè)js里面進(jìn)行判斷處理。
個(gè)人比較偏向于每一個(gè)模式下創(chuàng)建一個(gè)js變量進(jìn)行配置。具體思路如下示：
1、在根目錄下創(chuàng)建一個(gè)env文件夾，里面包含多個(gè)環(huán)境js文件，以及一個(gè)存放公用環(huán)境變量的js文件（comEnv.js）
其中，js文件的文件格式為：module.exports = { }
2、在package.json的script中進(jìn)行命令配置
如下圖所示：啟動(dòng)命令：npm run serve001，即可得到當(dāng)前環(huán)境為yt001
3、在main.js中獲取執(zhí)行的命令，獲取啟動(dòng)或者打包時(shí)，--mode XXX傳入的模式名稱。通過模式名稱進(jìn)行匹配js文件，獲取js文件定義的變量合并公用的變量，掛載到全局變量中。
const curEnv = process.env.NODE_ENV
const comEnv = require('../env/comEnv') // 引入公用的環(huán)境變量
let curEnvParam = {} // 當(dāng)前模式下，對(duì)應(yīng)存在的變量
if(curEnv == 'yt001') {
curEnvParam = require('../env/yt001')
} else if(curEnv == 'yt002') {
curEnvParam = require('../env/yt001')
}
const globalEnv = Object.assign(comEnv,curEnvParam) // 變量合并
Vue.prototype.$globalEnv = globalEnv; //將全局變量模塊掛載到Vue.prototype中
4、頁面直接使用全局變量$globalEnv得到所需的變量值
console.log(this.$globalEnv)
動(dòng)態(tài)添加環(huán)境變量
例如獲取package.json中的一些屬性并展示到應(yīng)用代碼中，可以往process.env中動(dòng)態(tài)添加環(huán)境變量。
在vue.config.js文件中引入package.json文件，然后直接往process.env賦值即可
const packjson = require('./package.json')
process.env.VUE_APP_VERSION = packjson.version
process.env.VUE_APP_SYSTEMNAME = packjson.name
則可以再頁面(例如，created())中直接通過process.env.VUE_APP_VERSION、process.env.VUE_APP_SYSTEMNAME自己獲取到所需的變量值
到此這篇關(guān)于vue-cli4.0多環(huán)境配置變量與模式詳解的文章就介紹到這了,更多相關(guān)vue-cli4.0多環(huán)境配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 一文搞明白vue開發(fā)者vite多環(huán)境配置
- vue項(xiàng)目多租戶環(huán)境變量的設(shè)置
- vue項(xiàng)目多環(huán)境配置(.env)的實(shí)現(xiàn)
- Vue多環(huán)境代理配置方法思路詳解
- vue.js多頁面開發(fā)環(huán)境搭建過程
- vue-cli項(xiàng)目配置多環(huán)境的詳細(xì)操作過程
- 基于vue cli 通過命令行傳參實(shí)現(xiàn)多環(huán)境配置
- 通過vue-cli來學(xué)習(xí)修改Webpack多環(huán)境配置和發(fā)布問題
- Vue+Vite+Axios項(xiàng)目多環(huán)境以及部署前后端跨域
相關(guān)文章
解決webpack+Vue引入iView找不到字體文件的問題
今天小編就為大家分享一篇解決webpack+Vue引入iView找不到字體文件的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí)
這篇文章主要為大家介紹了Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
使用el-row及el-col頁面縮放時(shí)出現(xiàn)空行的問題及解決
這篇文章主要介紹了使用el-row及el-col頁面縮放時(shí)出現(xiàn)空行的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue基礎(chǔ)學(xué)習(xí)之項(xiàng)目整合及優(yōu)化
這篇文章主要給大家介紹了關(guān)于Vue基礎(chǔ)學(xué)習(xí)之項(xiàng)目整合及優(yōu)化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
詳解vue-cli4 配置不同開發(fā)環(huán)境打包命令
這篇文章主要介紹了vue-cli4 配置不同開發(fā)環(huán)境打包命令,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
本篇文章主要介紹了Vue.js中的v-on(事件處理)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了基于vue實(shí)現(xiàn)微博三方登錄流程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
這篇文章主要為大家介紹了LogicFlow內(nèi)置菜單插件實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了vue路由如何實(shí)現(xiàn)登錄攔截，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
select的change方法傳遞多個(gè)參數(shù)的方法詳解
element-ui中的select,checkbox等組件的change方法的回調(diào)函數(shù)只有當(dāng)前選擇的val,如果想再傳入自定義參數(shù)怎么辦,本文給大家分享select的change方法如何傳遞多個(gè)參數(shù),感興趣的朋友一起看看吧2024-02-02