VUE-CLI 3项目读取环境变量

最新推荐文章于 2024-05-17 01:46:06 发布
最新推荐文章于 2024-05-17 01:46:06 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013293432/article/details/115361543
版权

问题：读取指定环境变量，返回值未undefine

该问题第一次遇到，查了很多文档，这次又遇到了，并且在这个问题上卡了很久，所以做个记录。

vue-cli 3项目的环境变量必须以VUE-APP或者VUE开头才能被读取到，否者读取到的值为undefine，格式如下：

VUE_APP_XXX_XXX = ''
abop
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何在基于vue-cli的项目自定义打包环境
10-17
总结来说，自定义Vue CLI项目的打包环境主要是通过`cross-env`设置环境变量`NODE_ENV`，然后利用`webpack.DefinePlugin`在客户端代码中引入这些变量。再根据环境变量的不同，加载相应的配置文件，实现不同环境下的...
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
10-17
Vue CLI 3.0使用`dotenv`库来处理环境变量。你可以在项目根目录下创建`.env.development`, `.env.production`和`.env.preview`文件，分别定义不同环境下的变量。例如，你可以设置`VUE_APP_CDN_URL`来存储CDN的URL，...
vue3 获取环境变量中的值
最新发布
哈
05-17 345
对象来访问环境变量。这些变量应该在项目根目录中的 .env 文件或者相应的环境文件（.env.local, .env.development, .env.production 等）中定义。，并在这些文件中设置不同的值。当运行应用时，Vue CLI 会根据选择的模式（development 或 production）自动选择合适的文件。如果需要在不同的环境中有不同的值，可以创建多个环境文件，如。在 Vue 3 中，可以使用。
vue3判断当前的环境变量, 获取环境变量中的值
reembarkation的博客
01-30 1535
vue3判断当前的环境变量, 获取环境变量中的值
vuecli3的环境变量配置
峰会路转的博客
11-11 1118
https://cli.vuejs.org/zh/guide/mode-and-env.html 今天在看vuecli3的环境变量配置，记录下学习笔记。一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对应每一个环境可能都会有所差异，比如说服务器地址、接口地址等等。在环境切换的时候，就需要不同的配置参数，所以就可以用环境变量和模式，来方便我们管理。 你可...
VITE+VUE3无法获取环境变量问题
Lou_Lan的博客
09-22 4813
使用vue cli创建的vue项目我们获取环境变量的方式和vite中不一样
环境变量_Vue 环境变量的使用
weixin_34984235的博客
01-13 2640
文章背景开发过程中经常遇到这样的问题：相同的代码部署到不同环境时需要使用不同的变量：比如接口域名变量”SERVE”，在测试环境和生产环境使用的是不同的域名。这种情况下如果在代码里定义变量，打包部署前再修改代码切换成不同的值再打包不利于代码的维护，也很繁琐。这时候利用环境变量来实现，在不用每次打包前改变变量的情况下，通过不同的打包命令在代码中使用不同的域名，或者其他自定义变量。概念简介1、...
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
10-17
然而，在实际项目部署时，往往需要根据不同的环境（如开发、测试、生产）进行配置调整，例如接口地址、环境变量等。手动修改这些配置会降低工作效率。本文将介绍如何基于 Vue CLI 自动化生成和抽离相关配置文件，以...
vue@cli3项目模板怎么使用public目录下的静态文件
10-15
Vue CLI 3提供了这个环境变量，它会自动根据当前环境（开发或生产）设置正确的基础URL。例如，开发环境通常是`http://localhost:8080/`，而生产环境可能是部署的服务器地址。在Vue组件的`<template>`和`<script>`...
详解Vue CLI3配置解析之css.extract
10-18
默认情况下，当环境变量 `NODE_ENV` 设置为 `'production'` 时，即在生产环境中，Vue CLI3 会自动将 CSS 提取出来。用户也可以在 `vue.config.js` 中自定义 `css.extract` 的行为。 在 `@vue/cli-service/lib/...
vue自定义环境 获取环境变量
weixin_45441173的博客
02-02 2511
vue自定义环境 获取环境变量
vue 根据动态变量名从object获取对应变量
jerry_lg的博客
10-27 2460
如，有一对象urlObject，通过动态变量名称param，获取对应值。 可通过urlObject[`${param}`]方式获取到值。 如下图：
vue3+ts+vite读取静态资源图片和环境变量
weixin_45441173的博客
09-04 4668
vue3vite.config.ts读取环境变量
vue中通过变量名的字符串，来获取变量并使用
u013595395的博客
11-05 1万+
如，有一变量isshow，通过this[`${"isshow"}`]可以获取到变量。 例，原：this.isshow = false ，现：this[`${"isshow"}`] = false 。 switch1(param) { this[`${param}`] = !this[`${param}`]; } <!DOCTYPE html> <ht...
vue3 如何获取env
seimeii的博客
07-28 3749
vue3 如何获取env
[VUE] Vue-CLI的安装、使用及环境配置（超详细）
热门推荐
leo的博客
11-20 3万+
Vue-CLI的安装、使用及环境配置的详细步骤（超详细）
Vue CLI 环境变量和模式
2201_75866484的博客
04-24 487
被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用。环境加载属性为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。NODE_ENV如果在环境中有默认的 NODE_ENV，你应该移除它或在运行 vue-cli-service 命令的时候明确地设置 NODE_ENV。
vue3 在main.ts中定义全局变量并使用
m0_65730686的博客
09-07 1193
vue3 在main.ts中定义全局变量并使用
vue-cli3中怎么区分本地，测试，生产环境
06-09
在 Vue CLI 3 中，可以通过在项目根目录下添加不同后缀的环境变量文件来区分不同的环境。默认情况下，Vue CLI 3 支持以下三种环境： - `.env`：默认的环境变量文件，适用于所有的环境。 - `.env.development`：开发环境的环境变量文件。 - `.env.production`：生产环境的环境变量文件。 在这些环境变量文件中，可以定义不同的环境变量，例如： ```ini # .env.development VUE_APP_BASE_URL=http://localhost:3000 ``` ```ini # .env.production VUE_APP_BASE_URL=https://api.example.com ``` 在项目中可以通过 `process.env` 访问这些环境变量，例如： ```javascript const baseUrl = process.env.VUE_APP_BASE_URL ``` 在开发环境中，读取的是 `.env` 和 `.env.development` 文件中的变量；在生产环境中，读取的是 `.env` 和 `.env.production` 文件中的变量。 需要注意的是，在 Vue CLI 3 中，环境变量的名称必须以 `VUE_APP_` 开头，否则不会被识别为有效的环境变量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值