前端-环境变量配置(vue)

news/2024/7/10 1:12:19 标签: vue, 前端

说明

一个实际开发项目最少有两种环境:

  1. 开发环境: 程序员正在开发项目;
  2. 生产环境: 程序员的代码已经写完了,项目已经上线了;

当然除此以外, 根据实际情况还有预发布环境、测试环境等…但是以上2个环境是最低要求



配置环境变量

注意: 修改任一环境变量之后,需要重启服务器

配置开发环境(npm run serve)

  1. 在项目的根目录下创建一个文件: .env.development
  2. 在文件中添加我们要配置的变量:
      + 变量名结构: VUE_APP_XXX
      + 例如: VUE_APP_BASEURL=http:\\localhost:3000
  3. 在要使用的位置获取:
    • process.env.VUE_APP_BASEURL

配置生产环境(npm run build)

  1. 在项目的根目录下创建一个文件: .env.production
  2. 在文件中添加我们要配置的变量:
      + 变量名结构: VUE_APP_XXX
      + 例如: VUE_APP_BASEURL=http:\\localhost:3000
  3. 在要使用的位置获取:
    • process.env.VUE_APP_BASEURL

http://www.niftyadmin.cn/n/1263671.html

相关文章

vuex - Module - 访问命名空间里的state、actions、mutations、getters的方式

vuex - Module - 访问命名空间里的state、actions、mutations、getters的方式1. vuex1.1. 作用1.2. 成员及作用2. 模块(module)说明3. 要点及注意点3.1. namespaced: true3.2. 辅助函数写在哪里?4. 演示代码概览5. state5.1. 全局变量获取和辅助函数获取…

npm-查看包所有版本和下载指定版本包

以jquery为例: 查看包所有版本 npm view jquery versions下载指定版本包 npm install jquery1.12.4

关于!!+Cookies.get(‘sidebarStatus‘)讲解

文章目录问题引入作用及文件位置作用文件位置!!Cookies.get(sidebarStatus)详细详解总结问题引入 在vue-element-admin框架中, vuex的app子模块中有这段代码: opened: Cookies.get(sidebarStatus) ? !!Cookies.get(sidebarStatus) : true,其中的 !!Cookies.get(sidebarStatu…

父子传值, 报错

单向数据流, 子组件不允许修改父组件的数据, 否则报错

vue 分页删除最后一条数据,返回上一级的分页

需求: 在删除某一页的唯一条数据时, 能成功跳转回删除操作页的上一页 async del (id) {try {await this.$confirm(确定删除吗?, 警告)/*** vue 分页删除最后一条数据,返回上一级的分页* * 这两个数据都是在 "data" 中定义的* this.totaData: 总数据数量*…

UE4 TCP通信 (UE作为客户端接收字节)

在上一篇(UE4 TCP通信)基础上,实现UE客户端接收服务端推送的字节数据并解析。 效果 (注意看左上角的打印信息) 步骤 1. 首先新建一个工程,然后创建一个Actor蓝图,这里命名为“BP_TCPConnect” 打开“BP_TCPConnect”,添加如下节点: (1)当服务端与客户端断开连接时…

js-把对象的中文key转换为英文的key

// 原数据 const arrObj [{入职日期: 43535,姓名: 张三,工号: 9527,手机号: 13899999999,转正日期: 43719},{入职日期: 43535,姓名: 李四,工号: 9528,手机号: 18255555555,转正日期: 43719} ]// 转换-方式一 // results 是原数据async onSuccess ({ header, results }) {// …

JS-把并列的对象数组转为树状结构

// 将并列对象数组, 转换为树状结构 turnData(arr, pid){const newArr []arr.forEach(item > {if(item.pid pid){const children this.turnData(arr, item.id)if(children.length > 0){item.children children}newArr.push(item)}});return newArr }