vue-cli4.x配置环境变量

最新推荐文章于 2021-12-14 10:02:35 发布
最新推荐文章于 2021-12-14 10:02:35 发布
阅读量414 收藏
点赞数
分类专栏： vue2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43422861/article/details/113743235
版权

1、配置不同环境下的env文件
**在这里插入图片描述**
2、给.env文件添加内容
在这里插入图片描述

3、在package.json中添加不同环境对应的执行语句

通过传递 --mode 来配置不同的模式
在这里插入图片描述
配置完后执行对应的指令就会加载对应的环境变量，比如运行 npm run gtest加载的是.env.gtest文件

4、使用
通过process.env.变量的形式使用环境变量值，例如process.env.VUE_APP_API_BASE_URL

Paul_Chan_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue cli4下环境变量和模式示例详解
11-20
本文介绍了vue cli4下环境变量和模式示例详解，分享给大家，具体如下： 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对： NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意： NODE_ENV – 是 “development”、“production” 、”test”或者自定义的值。具体的值取决于应用运行的模式 BASE_URL – 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径 除了 NODE_ENV 和 BASE_URL，其他
Vue CLI4环境变量的配置
wuningw的博客
11-18 524
1.创建不同环境变量文件 注意模式不同于NODE_ENV，一个模式可以包含多个环境变量。也就是说，每个模式都会将NODE_ENV的值设置为模式的名称——比如在 development 模式下NODE_ENV的值会被设置为"development"。 你可以通过为.env文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为.env.development的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。 你可以通过传递...
vue cli4 环境配置
qq_40194097的博客
01-28 144
在项目中建立 .env.development 文件 npm run serve 默认指本文件；建立.env.productionenv文件 cnpm run build 默认此文件 .env.development 文件 NODE_ENV="development" VUE_APP_URL='"http://192.168.0.xxx:8000/"' //开发模式运行环境 .env.productionenv文件 NODE_ENV="production", API_ROOT:'"https:/
vuecli4 启动_Vue-Cli 4.x运行环境配置问题
weixin_39923262的博客
01-12 337
Vue-Cli自3.x以上版本取消了Config目录，因此，需要玩家自己手动配置，具体方案如下：1. 在项目的根目录新建vue.config.js文件，并在该文件中配置相应的启动项// vue.config.jsmodule.exports={publicPath:"/dist/", //打包运行环境的根路径为/distdevServer:{ // 开发调试服务器配置项open:tr...
vue-cli（2-4）环境模式配置
MiemieWan的博客
12-11 898
Vue Cli 项目中有三种模式：development（开发模式）、production（生产模式）、test（测试模式）。 每种模式可配置多个环境变量。 若有多个开发环境，且每个环境的域名、主页不同，则需要给每个开发环境配置不同的域名等，打包时根据变量来区分不同的环境，引入相应的配置。 一、vue-cli3和4环境模式配置 文档：https://cli.vuejs.org/zh/...
浅谈vue-cli 3.0.x 初体验
11-27
本文将围绕Vue CLI 3.0.x 的特点、安装、多环境配置等方面展开讨论。 首先，Vue CLI 3.0.x 对比之前的2.0版本，最大的变化之一是其内置了ESLint集成，这让开发者在编码时可以得到更规范的代码提示，提高了代码质量...
Vue CLI2升级至Vue CLI3的方法步骤
12-12
总的来说，从 Vue CLI 2 升级到 Vue CLI 3 需要更新项目结构，调整配置文件，特别是环境变量、静态资源管理和 ESLint 规则。升级过程可能涉及代码更改，务必仔细检查并测试所有功能以确保平稳过渡。
10分钟上手vue-cli 3.0 入门介绍
08-27
在本篇文章中，我们将带您快速入门 Vue CLI 3.0，了解它的基本使用方法和配置技巧。 一、环境安装 首先，我们需要安装 Vue CLI 3.0。可以使用 npm 或者 yarn 进行安装。命令如下： ``` npm install -g @vue/cli `...
详解搭建一个vue-cli的移动端H5开发模板
11-21
【搭建Vue CLI移动端H5开发模板】 Vue-Mobile是基于Vue CLI构建的一个专为移动端H5开发设计的模板，它提供了一个完整的开发框架，能够帮助开发者迅速启动项目。这个模板采用了以下技术栈： 1. **Vue.js**：轻量级...
vue-cli项目配置多环境的详细操作过程
12-10
vue-cli 默认只提供了 dev 和 prod 两种环境。但其实正真的开发流程可能还会多一个 sit 或者 stage 环境， 就是所谓的测试环境和预发布环境。所以我们就要简单的修改一下代码。其实很简单就是设置不同的环境变量 详细操作过程 1.在 package.json 中添加 test 命令 "scripts": { "dev": "cross-env NODE_ENV=online node build/dev-server.js --host 192.168.1.8", "local": "cross-env NODE_ENV=local node build/dev-s
vue环境变量配置 解决process.env取值undefind的问题
weixin_44132285的博客
12-14 1万+
1.设置环境变量（开发环境，生产环境） 在如下图文件中设置环境变量 环境变量设置格式必须为 VUE_APP_XXX 生产环境设置的环境变量在打包时候可以生效，开发环境的环境变量在开发的时候可以访问到 2.设置完环境变量取值时候会发现undefined,此时我们需要在package.josn中配置打包和启动的模式 npm run serve的时候取的是devlopment设置的环境变量 num run build 的时候取的是production设置的环境变量 当webpack文件更改时 切记要重启项目获
vue-cli 4.x版本配置环境变量
weixin_42060658的博客
03-27 1589
你可以替换你的项目根目录中的下列文件来指定环境变量： .env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略 如 .env.developme...
vue cli4-环境变量和模式
大白能的博客
02-28 3995
官方文档 环境变量 一个环境变量文件只包含环境变量的键值对： NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意： NODE_ENV - 是 “development”、“production” 、"test"或者自定义的值。具体的值取决于应用运行的模式 BASE_URL - 会和 vue.config.js 中的 p...
vue-cli3 快速配置多环境变量
热门推荐
Amy_cloud的博客
06-17 1万+
vue-cli3 搭建的项目其实看起来比 cli2 简单明了很多，官方也有相关文档对多环境变量配置的描述。 https://cli.vuejs.org/zh/guide/mode-and-env.html 1.首先： 通过为 .env 文件增加后缀来设置某个模式下特有的环境变量 通过传递 --mode 选项参数为命令行覆写默认的模式 在项目的根目录新建3个文件夹，分别对应开发（dev），测试（te...
[nodejs] process.env 介绍
weixin_36210698的博客
01-07 2421
process.env 简介 返回用户的环境信息。参阅environ(7)。 返回的对象类似如下： { TERM: 'xterm-256color', SHELL: '/usr/local/bin/bash', USER: 'maciej', PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin', PWD: '...
vue-cli4.x配置打包命令
vscode_js的博客
01-27 1162
最近在接手一个项目中发现每次打包的时候都要去修改接口请求地址，如果是发测试我们打包的时候就要把axios.defaults.baseURL赋值为测试地址，手动改太不方便了，不如配置打包命令，改变手动频繁操作 首先我们先看下vue-cli官网对于环境变量的解释和说明：vue-cli官网 接下来开始我的配置流程： 第一步：我们在项目根目录创建四个文件，如下图所示： 简单说明一下为什么要创建者四个文件： 首先我们创建的文件名必须是 .env.xxxx，.env.xxxx文件的xxxx是必须和pack
Vue/cli4.x配置env开发环境、测试环境、生产环境
明知山
07-04 4573
在项目根目录新建三个env文件 .env.development //开发环境 .env.production //生产环境 .env.test //测试环境 .env.development NODE_ENV = 'development' VUE_APP_MODE = 'development' VUE_APP_BASE_URL = "http://testapi" .env.production NODE_ENV = 'production' VUE_APP_MODE = 'production
vue-cli中process.env配置以及打包本地运行或者线上运行配置
weixin_30367873的博客
05-24 765
我们知道打包默认npm run build,可是打包后点击dist文件中index.html一片空白.问题在于路径问题。我们在工程文件的最外层增加文件.env.production这个文件就是这么奇怪。里边可以配置整个项目文件都可以访问的变量哦。看看里边我写的啥：（必须包含VUE_APP_） 在其他文件中引用 在package.json里配置打包 运行npm run build:...
vue cli4.0配置环境变量
u012500054的博客
06-03 646
1、在项目根目录创建3个env文件对应（开发环境、测试环境、生产环境） 2、在package.js新增对应的启动命令和打包命令 eq: npn run serve-dev // 启动开发环境 eq: npn run build-dev // 打包开发环境 3、在vue.config.js配置publicPath（判断是因为生产环境是二级目录的） 4、在router.js配置base（判断是因为生产环境是二级目录的） 5、封装axios配置baseURL（读取env变量） ...
> vue3-code@1.0.1 serve > vue-cli-service serve 'vue-cli-service' 不是内部或外部命令，也不是可运行的程序 或批处理文件。
最新发布
06-26
2. **确认 `vue-cli-service` 是否在环境变量 PATH 中**： - 在 Windows 上，检查 `%USERPROFILE%\.npm\bin` 路径（或 `%APPDATA%\npm\bin`）是否包含 `vue-cli-service.exe`。 - 在 macOS/Linux 上，检查 `~/.npm...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值