Vue项目通过环境变量设置,实现打包后根据环境变量的不同 项目内的参数不同

最新推荐文章于 2024-08-17 17:52:35 发布
最新推荐文章于 2024-08-17 17:52:35 发布
阅读量1.4k 收藏 3
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60997870/article/details/123828170
版权

根目录下新增环境变量

配置变量配置:

NODE_ENV = 'production' //为了防止webpack不打包代码
VUE_APP_ICON = './favicon.png'    //vue项目配置环境必须用VUE_APP开头

package.json:

"build:dev": "vue-cli-service build --mode development",
"build:cr14hz": "vue-cli-service build --mode cr14hz",
"build:cq8j": "vue-cli-service build --mode cq8j",

LuWeiFun
关注
在Vue-cli3中 区分环境打包
前端李小白的博客
04-11 7143
在vue-cli3的项目中， npm run serve时会把process.env.NODE_ENV设置为‘development’； npm run build 时会把process.env.NODE_ENV设置为‘production’； 此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。 头疼的是打包时线上环境可能分多种，比如测试环境...
vue项目打包之开发环境和部署环境的实现
10-15
在开发Vue项目时，我们经常需要处理不同的环境设置，包括开发环境和部署环境。这是因为两者的需求和配置有所不同。开发环境中，我们通常使用模拟数据、热重载和快速反馈，而部署环境中，我们需要优化代码、合并资源...
Vue项目打包配置多环境，用npm命令打出不同的资源包
大鹏
07-21 1154
1.找到package.json文件，找到script节点。再新增一个新的脚本命令 test 2.修改prod.env.js配置文件，npm_lifecycle_event代表返回当前执行的脚本名称，通过不同的名称，来切换不同的变量 3.修改dev.env.js,修改本地的开发环境配置 最后npm run test 即可 4.package.json npm命令添加 ...
vue设置环境变量
最新发布
apple_70049717的博客
08-17 496
env.development这个就是开发环境，.env.production这个就是生产环境，也就是这个可以写本地的ip端口。npm run serve 运行开发环境，npm run build 打包生产环境。.env.production 这个就是生产环境，写线上正式环境的ip端口。.env.development和.env.production。在这一设置就可以了，自动加在设置。
vuecli 根据不同环境打包修改代码中参数
neko0622的博客
03-07 391
背景：项目中传给服务器的值为html代码的字符串，其中img标签的url需根据项目部署项目服务器域名，生成对应的url链接，生成传给服务器的数据之前需替换img的url部分解决：修改vue.config.js文件配置，package.json文件中自定义命令，生成不同的dist打包文件。
vue buid打包，修改环境变量
chuangshaoxia5899的博客
08-15 588
经常我们的项目有开发、测试、生产环境，所以需要我们打包(build)的时候吗，根据不同的环境变量去请求接口地址。 这篇文章操作说明很详细，不赘述，直接贴链接：build-环境变量的关系 ...
Vue多环境打包配置，根据命令生成不同打包文件名
Web_chicken的博客
06-24 4011
2.使用env配置文件设置Axios的baseURL 3.配置scripts脚本运行命令模式 在package.json文件下的scripts对象中配置mode
vue2 打包或开发时 自定义参数
Yun
03-31 1673
vue2 打包或开发时 自定义参数
vue项目环境变量配置的实现方法
12-09
实际开发中，开发环境和生产环境中一些变量是不同的，比如接口地址等等，打包之前需要手动切换。 编译时 新建env.js let baseUrl = ''; if(process.env.NODE_ENV == 'production'){ baseUrl = '...
vue项目使用.env文件配置全局环境变量的方法
10-16
综上所述，通过Vue项目中的.env文件配置全局环境变量是一种简单、高效且广泛使用的方法，它有助于开发者在不同环境下管理配置信息，并确保在项目部署前能够适配到正确的环境设置。理解和掌握这种方法对于提高开发...
nuxt.js添加环境变量,区分项目打包环境操作
01-18
配置打包环境变量时，发现nuxt.js的文档过于简单，无法做参照。 经查证了一些资料后，解决了该问题。遂整理成文档，发布于此，给同行一些参照。 一、添加cross-env插件 npm npm i cross-env yarn yarn add cross-...
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
见贤思齐焉，见不贤内自省
12-27 5722
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
vue项目webpack根据不同环境打包不同的文件
qq_40425411的博客
05-07 2821
vue项目webpack根据不同区域打包不同的文件步骤 需求简介：不同的区域获取不同的功能权限目录，打包的时候不将全部前端文件打包进去，各个地区有哪些功能 就打包哪些功能的文件，分区域部署。 思路： 1.构建一个下webpack的环境变量，再在npm run build:XX 带不同参数 2.这样不同的npm 命令就会有不同的环境变量 3.router.js 里再根据环境变量来注册路由 步骤 1....
Vue项目环境变量的配置
u011269322的博客
09-16 1157
目的：为了方便Vue项目能够在多环境（不同的Url地址）下运行，而又不想去重新打包或者修改代码，可以进行多环境的配置实现。
vue 项目打包，根据不同命令，配置不同环境，请求不同接口地址
yiyueqinghui的博客
02-18 1913
实现效果： 给测试环境打包时，采用A接口地址； 给生产环境打包时，采用B接口地址； 实现原理 process.argv获取当前运行的node命令，再根据不同命令，获取不同环境下的相应配置； 实现步骤 1、修改package.json，新增测试环境的打包命令 "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run d
细节！！！整理Vue项目中的那些环境变量
m0_63231347的博客
01-03 1902
一文全面了解Vue项目中用到的那些环境变量！！！
vue打包时使用不同的环境变量
weixin_43617604的博客
10-17 1861
vue打包时使用不同的环境变量 需求 同一个项目通过打包使用不同的环境变量，目前的环境有三个： 一、本地------开发环境 二、线上------测试环境 三、线上------正式环境 我们都知道vue默认的打包都是生产模式，所以说打包后的都是线上的东西，现在我们解决一下如何通过不同命令的打包方式使用不同的环境变量。 安装cross-env npm install cross-env --s...
vue cli3根据不同指令打包不同环境的包
weixin_44594219的博客
05-30 1794
介绍了vue cli3如何根据不同打包指令打包不同环境的包，以及易踩到的坑
Vue Cli 之 环境变量和模式
weixin_45092437的博客
05-10 2408
我们在使用 Vue-cli 创建的Vue项目中，可以在构建和运行时为项目设置环境变量，这些环境变量会根据环境（模式）的不同，而自动注入到项目中，也就是说我们可以根据环境不同，设置不同的环境变量或者给同个环境变量赋予不同的值，从而实现不同的效果。
在vue项目中怎么设置环境变量，让开发测试生产使用不同的环境变量
06-08
在 Vue 项目中，可以通过设置不同的环境变量来实现在开发、测试和生产环境中使用不同的配置。具体步骤如下： 1. 在项目根目录下创建 `.env`、`.env.development`、`.env.test` 和 `.env.production` 四个文件，分别对应不同的环境变量配置。 2. 在这些文件中定义变量，如： ``` VUE_APP_API_URL=http://localhost:3000/api ``` 注意：变量名必须以 `VUE_APP_` 开头，否则无法被识别为 Vue 的环境变量。 3. 在 `package.json` 文件中，添加 `scripts` 字段： ``` "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "vue-cli-service test", "start": "vue-cli-service start", "dev": "vue-cli-service serve --mode development", "build:test": "vue-cli-service build --mode test", "build:prod": "vue-cli-service build --mode production" } ``` 4. 在代码中，可以通过 `process.env.VUE_APP_API_URL` 来获取环境变量的值，如： ``` axios.get(process.env.VUE_APP_API_URL + '/users') ``` 注意：在使用环境变量时，必须以 `process.env.` 开头。 5. 运行命令来启动不同的环境： ``` npm run dev // 启动开发环境 npm run build:test // 打包测试环境 npm run build:prod // 打包生产环境 ``` 这样，就可以在不同的环境中使用不同的环境变量了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值