vue-cli4.0多环境配置变量与模式详解


Posted in Vue.js onDecember 30, 2020

vue-cli2.x还是vue-cli4.x模式的多环境变量配置方法(忘了)。

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目录下,新建文件夹用于存放环境变量。

 我的项目下,在src中新建文件夹envConfig文件夹,在index.js里面判断项目启动的环境,引入对应的环境变量文件

vue-cli4.0多环境配置变量与模式详解

js文件代码:

const comConfig = {
 projectName: '智感安防大脑'
}
let config = {}
// 此处若找不到文件,则会报错
try {
 if (process.env.APP_ENV) {
 config = require('./modules/' + process.env.APP_ENV + '.js').default
 }
} catch (e) {
 console.log('找不到指定的环境变量文件')
}

Object.assign(comConfig, config)
// console.log('comConfig')
// console.log(comConfig)
export default comConfig

modules里面存放的是各环境下的常量值。例如/modules/tianhe.js文件的代码如下:

export default {
 // 公共信息
 defaultFaceScore: 95.8, // 人脸阈值搜索
 mapRefreshTime: 1000 * 60, // 地图首页定时刷新时间
 hangDataStartTimeConf: '2020-01-01', // 地图首页,历史至今的数据查询。定义历史数据开始时间
 closeAlramDialogTime: 1000 * 60 * 5, // 告警弹窗,定时关闭
 realFlowRefreshTime: '1000*10', // 实有人口管理,数据展示,小区感知数据实时采集量,定时刷新数据
 doorDeviceInfoDialog: 1000 * 60 * 5, // 地图首页,关闭门禁机弹窗的时间
}

3、在main.js中引入环境变量下的index.js文件,并vue的原型上进行定义

// 引入多环境变量参数
import envConfig from './envConfig/index'
 Vue.prototype.$envConfig = envConfig

4、定义完成后,在页面使用如下:

页面输入: this.$envConfig.defaultFaceScore,即可得到环境变量值

======================更新于2020.06.23,end=========================

环境变量和模式

不同环境变量下的文件类型

.env  # 在所有的环境中被载入
.env.local  # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]  # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略

为一个特定模式准备的环境文件的 (例如.env.production) 将会比一般的环境文件 (例如.env) 拥有更高的优先级。因此,Vue CLI 启动时已经存在的环境变量拥有最高优先级,并不会被.env文件覆写。

进入特定模式下的环境,需要先在package.json文件下定义命令,其中使用--mode去指定特点的模式。

"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"
},

例如,要进入到yuntong环境下的开发模式,则启动命令: npm run serveYT 

模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:development 、production 、test 。

注意模式不同于 NODE_ENV,一个模式可以包含多个环境变量。也就是说,每个模式都会将 NODE_ENV 的值设置为模式的名称——比如在 development 模式下 NODE_ENV 的值会被设置为 "development"。

你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如,如果你在项目根目录创建一个名为 .env.yuntong 的文件,那么在这个文件里声明过的变量就只会在 yuntong 模式下被载入。

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量,请在你的 package.json 脚本中加入:"buildYT": "vue-cli-service build --mode yuntong"。

在客户端侧代码中使用环境变量

使用env配置文件

在根目录下定义了多个.env文件。分别为:.env,.env.production,.env.yuntong

其中,要.vue页面可以直接使用的常量命名需要以VUE_APP_开头,例如VUE_APP_SECRET

在官网上有这么一段话说明:

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们:console.log(process.env.VUE_APP_SECRET)。

除了 VUE_APP_* 变量之外,在你的应用代码中始终可用的还有两个特殊的变量:

  • NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。

  • BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符,即你的应用会部署到的基础路径。

所有解析出来的环境变量都可以在 public/index.html 中以 HTML 插值中介绍的方式使用。

例如页面.env.yuntong文件定义两个参数

NODE_ENV = "yuntong"<br>VUE_APP_MAPPORT = "8093" 
PORT=9000

在main.js中直接打印:window.console.log(process.env),则发现打印出的内容为:

 

BASE_URL: "/"
NODE_ENV: "yuntong"
VUE_APP_MAPPORT: ""8093"

NODE_ENVBASE_URL参数是始终存在的两个变量,NODE_ENV 若不定义,则默认为develop。变量VUE_APP_MAPPORT是以VUE_APP开头的,可以直接在页面中获取。而PORT则不可以直接在页面中获取。

PORT的使用,虽然不可以直接在应用代码中自己使用,但是在vue.config.js中可以直接获取。

在vue.config.js中定义:

module.exports = {
 devServer:{
 port: 8000
 }
}

项目启动后,访问地址不是8000端口,而是8093端口,说明在yuntong环境下,.env.yuntong文件定义的变量PORT生效了(测试发现不区分大小写,js文件定义port或者PORT都生效)

至于其他的一些非VUE_APP_*的变量,如何使用,暂时没有发现,也没有查阅到相关的文档,后续继续补充说明。

########################以下{}补充于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配置

由于在实际开发过程中,可能需要的环境比较多,例如4,5个。直接在根目录下创建.env.XXX文件,显得整个项目结构变大也没有条理,因此考虑把不同环境下的变量文件归类到js中进行配置。或者放在一个js里面进行判断处理。

个人比较偏向于每一个模式下创建一个js变量进行配置。具体思路如下示:

1、在根目录下创建一个env文件夹,里面包含多个环境js文件,以及一个存放公用环境变量的js文件(comEnv.js)

其中,js文件的文件格式为:module.exports = { }

  vue-cli4.0多环境配置变量与模式详解vue-cli4.0多环境配置变量与模式详解

2、在package.json的script中进行命令配置

如下图所示:启动命令:npm run serve001,即可得到当前环境为yt001

vue-cli4.0多环境配置变量与模式详解

3、在main.js中获取执行的命令,获取启动或者打包时,--mode XXX传入的模式名称。通过模式名称进行匹配js文件,获取js文件定义的变量合并公用的变量,挂载到全局变量中。

vue-cli4.0多环境配置变量与模式详解

const curEnv = process.env.NODE_ENV
const comEnv = require('../env/comEnv') // 引入公用的环境变量
let curEnvParam = {} // 当前模式下,对应存在的变量
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)

动态添加环境变量

例如获取package.json中的一些属性并展示到应用代码中,可以往process.env中动态添加环境变量。

在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自己获取到所需的变量值

到此这篇关于vue-cli4.0多环境配置变量与模式详解的文章就介绍到这了,更多相关vue-cli4.0多环境配置内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 #Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 #Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 #Vue.js
梳理一下vue中的生命周期
Dec 30 #Vue.js
Vue实现简易购物车页面
Dec 30 #Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 #Vue.js
vue+element UI实现树形表格
Dec 29 #Vue.js
You might like
php下使用以下代码连接并测试
2008/04/09 PHP
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
php中cookie的使用方法
2014/03/29 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
php中strtotime函数性能分析
2016/11/20 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
js实现纯前端压缩图片
2020/11/16 Javascript
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
自荐信模版
2013/10/24 职场文书
交通文明倡议书
2014/05/16 职场文书
金融保险专业求职信
2014/09/03 职场文书
《大禹治水》教学反思
2016/02/22 职场文书