首页 > 其他分享 >.env.development(开发环境)、.env.prodction(正式环境)、自定义环境 例如:读取vue项目根目录 process.env.VUE_APP_filePath

.env.development(开发环境)、.env.prodction(正式环境)、自定义环境 例如:读取vue项目根目录 process.env.VUE_APP_filePath

时间:2023-05-26 12:34:41浏览次数:47  
标签:VUE 自定义 APP 环境 地址 vue env

.env.development(开发环境)、.env.prodction(正式环境)、自定义环境
原文链接:https://blog.csdn.net/qq_42855675/article/details/114261585

文章目录

1.配置文件:

      .env.development:开发环境下的配置文件
      .env.production:生产环境下的配置文件

2.命名规则

      属性必须以VUE_APP_开头。

#开发环境下的配置文件
VUE_APP_ENV=development
#业务系统地址
VUE_APP_protalUrl=地址一
#市门户地址
VUE_APP_menhuUrl=地址二
#腾讯统计分析id
VUE_APP_sid=腾讯ID
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

3.关于文件的加载

根据启动命令vue自动加载对应的环境,vue是根据文件名进行加载:
npm run serve ---- NODE_ENV = development
nom run build ---- NODE_ENV = production

使用

		//使用地址一:
        protalUrl: () => { // 业务系统地址
            return process.env.VUE_APP_protalUrl
        },
        //使用地址二
        menhuUrl: () => { // 市门户地址
            return process.env.VUE_APP_menhuUrl
        },
		//其他的地址类似使用
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

自定义环境

        第一步:创建.env.test文件
        第二部:配置环境及地址

# 测试环境
NODE_ENV=production
VUE_APP_ENV=test
#请求接口基准地址
VUE_APP_BASE_API=地址一
#业务系统地址
VUE_APP_protalUrl=地址二
#市门户地址
VUE_APP_menhuUrl=地址三
#腾讯统计分析id
VUE_APP_sid=腾讯ID
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

        第三步:配置package.json

    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "test": "vue-cli-service build --mode test"
    },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

        配置完成,使用命令npm run test即可打包test环境的包。

标签:VUE,自定义,APP,环境,地址,vue,env
From: https://www.cnblogs.com/sunny3158/p/17434413.html

相关文章

  • FLEX4实践—自定义控件皮肤
     设计需求: 1)对于界面上的TextInput控件,需要设置‘必填’与‘非必填’两种状态 2)对于‘必填’状态希望给与控件特殊的显示样式 3)希望能简化代码,不需要每次使用TextInput控件都要对其置样式  方案1:将样式控制写入css文件,通过Style属性控制TextInput的显示 方案2:利用Flex......
  • 统信UOS系统开发笔记(一):国产统信UOS系统搭建开发环境之虚拟机安装
    前言  开发国产应用,需要使用到统信UOS系统,之前已经开发过国产银河麒麟V4、V7和V10版本了,本次新项目使用到统信UOS,记录UOS虚拟机安装流程,方便快捷进行相关开发工作。<br>提前准备VMware16虚拟机软件  下载VM16版本及以上的vmware虚拟机版本,否则没有CentO8选项,自行百度下......
  • Mybatis-Plus自动生成代码,自定义Controller
    MP网址:https://baomidou.com/pages/779a6e/#%E4%BD%BF%E7%94%A8直接copy官网代码修改成自己的:privatevoidgenerate(){FastAutoGenerator.create("jdbc:mysql://localhost:3306/test?serverTimezone=GMT%2b8","root","P@ss123.")......
  • 如何在Angular应用程序中插入自定义 CSS?这里有答案!
    KendoUIforAngular是专用于Angular开发的专业级Angular组件,telerik致力于提供纯粹的高性能AngularUI组件,无需任何jQuery依赖关系。KendoUIR12023正式版下载Telerik_KendoUI产品技术交流群:726377843    欢迎一起进群讨论为什么需要在Angular应用程序中插入自定义C......
  • 下篇1:将 ConfigMap 中的键值对作为容器的环境变量
    写在开篇继续接上篇,《一文了解K8S的ConfigMap》。上篇聊过,官方文档中提到的可以使用下面4种方式来使用ConfigMap配置Pod中的容器:容器的环境变量:可以将ConfigMap中的键值对作为容器的环境变量。在只读卷里面添加一个文件,让应用来读取:可以将ConfigMap中的内容作为一个只......
  • Java自定义注解(Annontation)
    (一)注解简介注解(Annontation),Java5引入的新特性,位于java.lang.annotation包中。提供了一种安全的类似注释的机制,用来将任何的信息或元数据(metadata)与程序元素(类、方法、成员变量等)进行关联。是一种说明、配置、描述性的信息,与具体业务无关,也不会影响正常的业务逻辑。但我们可以用反......
  • 自定义频率类
    自定义频率类classSuperThrottle(BaseThrottle):VISIT_RECORD={}def__init__(self):self.history=Nonedefallow_request(self,request,view):#自己写逻辑,判断是否超频#(1)取出访问者ip#(2)判断当前ip不在访问字典......
  • 多选自定义事件
    <template><view@click="onSelect(item,index)"v-for="(item,index)inlist"> //当选择的等于当前id才显示<imagev-if="selected.indexOf(item)>=0"></image><imagev-else></image></view><......
  • 普加项目管理中间件示例之二:自定义表格列
    自定义表格列示例demo/diyColumns.html上文介绍了标准列,这里介绍一下自定义列。正如标准列是一些预设好的对象,自定义列也是一个对象。支持多种数据类型的列:String、Number、Boolean、Date、Array等支持多种单元格编辑器:TextBox、Spinner、CheckBox、DatePicker、ComboBox、TreeSel......
  • 【编程日记】搭建PyCharm集成开发环境
    0.相关确定本教程使用的版本号为专业版PyCharm2022.3.2,如果您是初学者,为了更好的学习本教程,避免不必要的麻烦,请您下载使用与本教程一致的版本号。1.PyCharm的下载官网下载:https://www.jetbrains.com/pycharm/download/other.html百度网盘:链接:https://pan.baidu.com/s/1bBiVf0......