环境变量配置、vue-cli3

最新推荐文章于 2025-06-14 09:44:07 发布
最新推荐文章于 2025-06-14 09:44:07 发布
阅读量5.9k 收藏 2
点赞数
CC 4.0 BY-SA版权
文章标签： 环境变量 vue-cli3.0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lbPro0412/article/details/83152395
本文介绍了如何在Vue-cli3项目中通过命令行传递动态参数，例如`npm run build -- test`，并详细讲解了配置环境变量的步骤。在`package.json`中设置后，可以使用`NODE_ENV`根据命令改变环境，同时创建`VUE_APP_CURRENTMODE`文件以写入固定模式。在代码中直接打印这些变量，确保它们正确地被项目识别和使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

怎么通过命令去给项目传递动态参数：npm run build -- test （注意空格）

第一步：package.json   

第二步：

1、NODE_ENV ： 根据命令展示 (npm run build -- test)

2、VUE_APP_CURRENTMODE： 文件里面写死的  注意：这个是要新建文件的

如图所示：

 

第三步：

直接打印：

console.log(process)

展示为：无数据

了解本专栏 订阅专栏 解锁全文
Vue 82 ，process.env 管理 Vue 项目的环境变量Vue项目中环境变量的配置及调用
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
07-05 3279
⭐在构建 Vue 应用时，管理配置是开发中的一个重要部分。不同的环境，如开发、测试和生产，往往需要不同的配置，例如 API、 基础 URL、第三方服务的密钥等。这时使用环境变量，可以帮助我们更好地管理这些配置。这里分享记录，如何在 Vue 项目中使用 process.env 来管理环境变量。
vue怎么引入环境变量_vue-cli3.0入门-环境变量和模式配置（二）
weixin_39982537的博客
12-22 913
我们在开发项目过程中，正常情况下会有本地开发环境，测试线环境，线上正式线环境等，当然不同公司会有点差别，具体情况具体玩吧，不同环境的配置会有所不同，比如我们服务器地址，接口地址等等。所以我们要区分，那就需要我们配置境变量和模式，来管理。关于环境变量的配置，在此，自己也是简单做一下笔记，只为方便以后查看，虽然官方有文档：部分内容也会拿过来记录，下面是自己之前配置的一些笔记整理。一、环境变量的四种方式...
vue-cli配置环境变量的方法
08-27
本篇文章主要介绍了vue-cli配置环境变量的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-cli3环境变量与分环境打包
weixin_34085658的博客
02-15 1339
第一步 : 了解环境变量概念 我们可以根目录中的下列文件来指定环境变量: .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # ...
Vue2 与 Vue3 中环境变量配置的差异详解。
最新发布
专研技术的大学生:会点Java和前端
06-14 692
本文对比了Vue2和Vue3在环境变量配置上的主要差异：1）变量前缀不同（Vue2用VUE_APP_，Vue3用VITE_APP_）；2）访问方式不同（Vue2通过process.env，Vue3通过import.meta.env）；3）构建工具不同（Vue2通常使用webpack，Vue3倾向于Vite）。两者都需要创建.env文件并在package.json中配置运行命令，合理使用环境变量能提升项目的环境适应性和可维护性。
vue-cli3.0 环境变量与模式
weixin_34235105的博客
06-01 449
vue-cli3.0移除了配置文件目录： config和build文件夹。可以说是非常的精简了，那移除了配置文件目录后如何自定义配置环境变量和模式呢? 为什么需要配置环境变量和模式呢？ 所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中，一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对应每一...
vue项目配置环境变量
忽胖忽瘦的博客
10-27 1485
配置环境变量官方文档 配置环境变量的两种方式 一、通过.env文件配置环境变量 1.在根目录创建.env文件并创建变量 环境变量的命名必须是：VUE_APP_XXX 环境变量声明方式：“键=值”对 2.配置文件作用范围 3.配置配置文件 二、在vue.config.js中直接声明环境变量 三、环境变量使用 1.html中使用环境变量 2.组件中使用环境变量 //... mounted() { alert(process.env.VUE_APP_STATIC_URL) } //... ...
vue-cli-plugin-i18n:Vue CLI插件可将vue-i18n添加到您的Vue项目
05-11
:globe_with_meridians: vue-cli-plugin-i18n Vue CLI插件可将vue-i18n添加到您的Vue项目 :handshake: 支持新项目 Intlify Project是一个开源项目，其中包括Vue I18n和i18n工具和自由软件，其持续的开发完全依靠...
vue-cli2与vue-cli3在一台电脑共存的实现方法
10-16
配置环境变量的目的是为了让系统能够识别并运行我们所安装的两个版本的Vue CLI。具体来说，就是将两个`.bin`文件夹的路径添加到系统的环境变量中。这样，在命令行中输入`vue-cli2`或`vue-cli3`时，系统能找到对应的...
vue-cli3添加模式配置多环境变量的方法
12-09
以下是对 Vue CLI 3 添加模式配置多环境变量方法的详细解释： 首先，环境变量和模式在开发过程中起着至关重要的作用。它们允许我们根据当前的运行环境来调整应用的行为，例如在预发环境中设置不同的接口地址，或者...
vue-cli 环境变量
^_^
06-21 1276
环境变量 在项目开发期间可能，我们可能发送ajax到一个地址，项目上线后又换另一个地址，我们呢又不希望每次去手动切换地址，所以这时候就用到了环境变量 在项目运行的过程中，通过不同的命令，能加载不同的配置文件，从而获取不同的环境变量。 环境变量的配置文件 一、 .env.development 开发环境配置文件 当运行npm run dev 的时候会以此文件为配置，这个文件中可以针对开发环境配置的变量 # 开发环境的基础地址 VUE_APP_BASE_API = 'http://ww..
vue-cli的环境变量
helloschurmi的博客
11-21 1734
为什么需要环境变量 在一个产品的前端开发过程中，一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境，然后才能正式的发布。对于不同的环境，有些配置项会有所差异。服务器地址、接口地址。。。 这个时候就需要环境变量和模式了 环境变量 cli-3.0总共提供了四种方式来制定环境变量： 在根目录添加.env文件，配置所有情况下都会用到的配置 在根目录添加.env.local 文件，配置所有情况下都会用到的配置，与.env的区别是只会在本地，该文件不会被git跟踪 在根目录添加.env.[mode] 文
Vue-CLI环境变量和模式
SoOnPerson的博客
12-20 693
Vue-CLI环境变量和模式 1、官方文档 2、场景 本地开发时请求地址，线上环境请求地址，不一致，部署路径不一致，其他环境变量因为部署环境不一致，方便打包和开发 3、代码 1、项目结构 .env 是所有的环境中都会被载入 .env.dev 是在指定模式中被载入 .env.product 是在指定模式中被载入 .env NODE_ENV=local VUE_APP_PREVIEW=tru...
细节！！！整理Vue项目中的那些环境变量
m0_63231347的博客
01-03 2190
一文全面了解Vue项目中用到的那些环境变量！！！
CLI3 的配置
weixin_46134332的博客
03-31 1273
在项目中修改配置 在根文件下创建vue.config.js文件, 就可以在这个文件中定义需要修改的配置 cli3会自动将vue.config.js文件中的配置和默认的配置进行合并 例如:配置示例: module.exports = { publicPath: "/" , //根路径 outputDir : "dist", //构建输出目录 ，在npm run build 打包生成的文件夹的名字 assetsDir: "assets", //静态资源目录（js,css,img
vue环境变量
weixin_42666092的博客
06-11 5561
1.mode 模式 设置后， --mode production,是在打包后生成的文件中启动触发， --mode development 是在开发环境下启动触发触发 模式设置，在package.json 的 scripts属性中设置的命令 development(开发环境) 模式用于 vue-cli-service serve test(测试) 模式用于 vue-cli-service test:unit production(生产环境) 模式用于 vue-cli-service build 和 vu
VUE环境变量
香梨炒虾米的博客
12-28 2914
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 VUE环境变量前言一、环境变量是什么二、模式三、使用环境变量第一步第二步第三步第四步总结 前言 首先，我们需要知道什么是VUE环境变量，他是干什么的？为什么需要环境变量？ 一、环境变量是什么 环境意思就是在某一个特殊的地方，变量就是会变的意思。总体意思就是说：“在什么时候干什么事”。 往往我们在开发的时候一般会有是三个环境：  开发环境    测试环境   线上环境 二、模式
怎么检查和配置vue-cli的环境变量
03-28
检查和配置vue-cli的环境变量可以按照以下步骤进行： 1. 检查环境变量 在命令行中输入以下命令可以查看当前系统的环境变量： ``` echo $PATH ``` 如果没有输出任何内容，说明当前系统没有配置环境变量或者环境变量被清空了。 2. 安装vue-cli 在命令行中输入以下命令可以安装vue-cli： ``` npm install -g vue-cli ``` 安装完成后，可以使用以下命令检查vue-cli是否安装成功： ``` vue --version ``` 如果输出版本号，说明vue-cli安装成功。 3. 配置环境变量 在命令行中输入以下命令可以查看npm全局安装包的路径： ``` npm config get prefix ``` 输出的路径即为npm全局安装包的路径。在该路径下，有一个名为bin的文件夹，里面包含了所有全局安装的npm包的可执行文件。将该路径加入系统的环境变量中，即可在任意目录下使用vue命令。 可以参考以下步骤进行配置： - 在命令行中输入以下命令打开环境变量配置文件： ``` vi ~/.bashrc ``` - 在文件末尾添加以下内容： ``` export PATH=$PATH:/path/to/npm-global/bin ``` 其中/path/to/npm-global/bin为上面查看到的npm全局安装包的路径。 - 保存并退出文件，然后执行以下命令使环境变量配置生效： ``` source ~/.bashrc ``` 4. 检查环境变量配置是否生效 在命令行中输入以下命令，如果能够正常输出vue-cli的版本号，则说明环境变量配置成功： ``` vue --version ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

浏览器翻译官~

你的励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值