vue .env文件配置使用
文章目录1、文件格式2、文件内容:3、文件配置①、.env②、.env.developmen③、.env.production3、使用方法①、process②、process.env③、获取 VUE_APP_API_BASE_URL④、全局配置Ⅰ、config/index.jsⅡ、使用1、文件格式.env全局默认配置文件,不论什么环境都会加载合并.env.developmen 开发环境下的配置文件
文章目录
1、文件格式
- .env 全局默认配置文件,不论什么环境都会加载合并
- .env.development 开发环境下的配置文件
- npm run serve(或者npm run dev 主要看 package.json) 会合并 .env 文件
- .env.production 生产环境下的配置文件
- npm run build 会合并 .env 文件
2、文件内容:
注意:自定义属性名必须以VUE_APP_开头,比如VUE_APP_XXX
3、文件配置
①、.env
NODE_ENV=production
VUE_APP_PLATFORM_NAME=JeecgBoot 企业级低代码平台
VUE_APP_SSO=false
②、.env.development
NODE_ENV=development
VUE_APP_API_BASE_URL=/jeecg-boot
VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
// 必须以 VUE_APP_ 开头,测试
VUE_WEBSOCKET=ws://localhost:8081/
③、.env.production
NODE_ENV=production
VUE_APP_API_BASE_URL=/jeecg-boot
VUE_APP_CAS_BASE_URL=http://localhost:8888/cas
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
4、使用方法
process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程。
随便找个位置打印如下参数(如:console.log(process.env)
),然后 npm run serve 运行开发环境。
①、process
②、process.env
③、获取 VUE_APP_API_BASE_URL
process.env.VUE_APP_API_BASE_URL
获取 VUE_WEBSOCKET
process.env.VUE_WEBSOCKET
名字必须以 VUE_APP开头否则,process.env 对象中不会有该属性值
④、全局配置
你也可以将 process.env.VUE_APP_API_BASE_URL 存入 window._config 或者 Vue.prototype 原型中
Ⅰ、config/index.js
import Vue from 'vue'
//设置全局API_BASE_URL
Vue.prototype.API_BASE_URL = process.env.VUE_APP_API_BASE_URL
window._CONFIG['domianURL'] = Vue.prototype.API_BASE_URL
//单点登录地址
window._CONFIG['casPrefixUrl'] = process.env.VUE_APP_CAS_BASE_URL
window._CONFIG['onlinePreviewDomainURL'] = process.env.VUE_APP_ONLINE_BASE_URL
window._CONFIG['staticDomainURL'] = Vue.prototype.API_BASE_URL + '/sys/common/static'
window._CONFIG['pdfDomainURL'] = Vue.prototype.API_BASE_URL+ '/sys/common/pdf/pdfPreviewIframe'
// 存入 window._CONFIG
window._CONFIG['webSocket'] = process.env.VUE_APP_WEBSOCKET // 我的 .env.developmen 以修改正确
// 存入 Vue.prototype
Vue.prototype.APP_WEBSOCKET = process.env.VUE_APP_WEBSOCKET
可以随便写在一个文件里,通常会写在 config/index.js 中,在 main.js 引入即可
Ⅱ、使用
window._CONFIG[‘webSocket’]
Vue.prototype.APP_WEBSOCKET 或 this.APP_WEBSOCKET 或 process.env.VUE_APP_WEBSOCKET,这三个是等价的常用 this.APP_WEBSOCKET
注意:
添加实例 property 时需要注意,带$ 和不带的区别https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html
$ 是在 Vue 所有实例中都可用的 property 的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。
Vue.prototype.$userName = "jeecg-boot"
Vue.prototype.pass_word = "123456789"
使用
console.log(this.$userName)
console.log(this.pass_word)
简单说
- 如果 vue 原型参数和组件中定义的参数相同,则会被覆盖,有冲突,建议使用 $ 定义原型参数
- 如果 vue 原型参数和组件中定义的参数不相同,那么可以不使用 $ 定义
更多推荐
所有评论(0)