vue-cli 环境变量 process.env的使用及说明

作者:前端抠脚 时间:2024-05-29 22:28:45 

vue-cli 环境变量 process.env使用

参考官网:  https://cli.vuejs.org/zh/guide/mode-and-env.html#在客户端侧代码中使用环境变量

话不多说直接看代码

vue-cli 环境变量 process.env的使用及说明

在package中的配置如下图

vue-cli 环境变量 process.env的使用及说明

举个本地运行的例子.env.serve;

注意:

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

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

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

NODE_ENV=development

VUE_APP_CURRENTMODE=serve

VUE_APP_BASEURL=http://clife.ngrok.i84.com.cn
VUE_APP_BASEAPI=http://clife.ngrok.i84.com.cn/

运行 yarn serve在模式下,然后就可以使用当中的全局变VUE_APP_BASEURL

mounted() {
       let baseUrl = process.env.VUE_APP_BASEURL;
       console.log(baseUrl)
}

结果如下

vue-cli 环境变量 process.env的使用及说明

测试test -->  VUE_APP_BASEAPI 为“/”的好处是在切换环境的接口请求直接为当前域名

//该配置为打包到测试服的配置
//该配置保留vconsole插件功能
NODE_ENV=production
VUE_APP_CURRENTMODE=test
VUE_APP_BASEURL=http://clife.ngrok.i84.com.cn
VUE_APP_BASEAPI=/

production -->VUE_APP_BASEAPI 为“/”的好处是在切换环境的接口请求直接为当前域名

//该配置为打包上正式环境配置
NODE_ENV=production
VUE_APP_CURRENTMODE=production
VUE_APP_BASEAPI=/

vue-cli配置环境变量process.env.xxx

官方解释

模式和环境变量 | Vue CLI

vue-cli 环境变量 process.env的使用及说明

自己新建.env.xxx

然后在package.json中,--mode对应.env.xxx的xxx

vue-cli 环境变量 process.env的使用及说明

而.env.test比较特殊,默认NODE_ENV为development,打包时视作单元测试,不会打出css和图片文件,解决办法是可以强行指定为production

vue-cli 环境变量 process.env的使用及说明

使用方法

process.env.xxxx

vue-cli 环境变量 process.env的使用及说明

来源:https://blog.csdn.net/weixin_40404336/article/details/105631913

标签:vue-cli,环境变量,process.env
0
投稿

猜你喜欢

  • 整理各种js按比例缩放图片方法

    2007-09-27 20:01:00
  • ASP 操作cookies的方法

    2011-03-10 11:24:00
  • 详解Spring Security怎么从数据库加载我们的用户

    2024-01-21 18:35:37
  • python使用QQ邮箱实现自动发送邮件

    2021-03-03 22:10:06
  • Python+Pillow+Pytesseract实现验证码识别

    2023-07-19 14:50:44
  • 用js+cookie记录滚动条位置

    2024-06-05 09:11:02
  • Mysql误删除DELETE数据找回操作指南

    2024-01-16 20:48:18
  • 三种Python比较两个时间序列在图形上是否相似的方法分享

    2023-04-26 20:57:12
  • 基于python的Tkinter编写登陆注册界面

    2022-12-20 09:44:30
  • Python中对元组和列表按条件进行排序的方法示例

    2021-04-21 22:21:22
  • SQL Server自定义异常raiserror使用示例

    2024-01-22 10:41:08
  • PHP中Static(静态)关键字功能与用法实例分析

    2024-05-03 15:53:52
  • 如何在一个广告旗帜里轮番显示时间长度不一的不同广告?

    2010-06-26 12:35:00
  • 分享6 个值得收藏的 Python 代码

    2022-12-31 05:09:57
  • Geohash的原理、算法和具体应用探究

    2023-10-06 07:59:44
  • SQL重复记录处理(查找,过滤,删除)

    2008-11-17 20:47:00
  • javascript操作ASP.NET服务器控件

    2023-07-21 15:09:26
  • Python入门必须知道的11个知识点

    2023-12-19 05:32:47
  • python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法

    2023-07-07 02:41:30
  • asp base64加解密函数代码

    2011-03-31 11:02:00
  • asp之家 网络编程 m.aspxhome.com