vue .env文件配置使用

待我称王封你为后i 2023-10-04 14:40 65阅读 0赞

#### 文章目录 ####

*   *   *   *  1、文件格式
             *  2、文件内容：
             *  3、文件配置
             *   *  ①、.env
                 *  ②、.env.development
                 *  ③、.env.production
             *  4、使用方法
             *   *  ①、process
                 *  ②、process.env
                 *  ③、获取 VUE\_APP\_API\_BASE\_URL
                 *  ④、全局配置
                 *   *  Ⅰ、config/index.js
                     *  Ⅱ、使用

##### 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 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70]

###### ②、process.env ######

![在这里插入图片描述][20210528105602311.png]

###### ③、获取 VUE\_APP\_API\_BASE\_URL ######

process.env.VUE\_APP\_API\_BASE\_URL  
![在这里插入图片描述][20210528105843541.png]  
获取 VUE\_WEBSOCKET  
process.env.VUE\_WEBSOCKET  
![在这里插入图片描述][20210528110604624.png]  
名字必须以 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`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 1]  
注意：  
添加实例 property 时需要注意，带$ 和不带的区别[https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html][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 原型参数和组件中定义的参数不相同，那么可以不使用 $ 定义

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210528105531988.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3,size_16,color_FFFFFF,t_70
[20210528105602311.png]: https://img-blog.csdnimg.cn/20210528105602311.png
[20210528105843541.png]: https://img-blog.csdnimg.cn/20210528105843541.png
[20210528110604624.png]: https://img-blog.csdnimg.cn/20210528110604624.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210528113528645.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTM4MDk3,size_16,color_FFFFFF,t_70
[https_cn.vuejs.org_v2_cookbook_adding-instance-properties.html]: https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html