vue项目配置环境

已于 2023-07-24 14:44:32 修改
阅读量214 收藏
点赞数 1
文章标签： vue.js 前端
于 2022-08-02 18:25:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47190975/article/details/126124321
版权

首先,需要在项目根目录下创建三个文件,分别是开发环境,生产环境和测试环境。都要以.env的格式开头。

在刚刚创建的文件里面编写环境配置,基本路径开头必须以VUE_APP开头

在page.json中修改启动方式就可以启动不同环境,在启动命令后面添加--mode dev标识开发环境

mode后面的环境名称取决于上面创建的环境文件名称。.env.prod就写成--mode prod 

在需要使用配置的信息时可以通过以下代码获取到当前的环境信息

process.env.VUE_APP_BASR_API
卯足劲往前冲
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目分环境打包配置不同命令
06-26
vue实现分环境打包，给不同的环境配置相对应的打包命令，添加功能版，带有之前的基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子
webpack vue项目开发环境局域网访问方法
08-27
下面小编就为大家分享一篇webpack vue项目开发环境局域网访问方法，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧
vue3-dev-tools.crx
02-22
vue3_dev_tools.crx
vue 多环境文件配置（开发，测试，生产）
最新发布
weixin_43907110的博客
09-21 413
1.经常我们在开发时候会有不同环境，要代理的路由等等都会出现不同。配置一下三个文件打包的时候，执行三个不同的指令就会打包不同的环境。package.json 中配置scripts 指令。以,env.development 为例子。
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
见贤思齐焉，见不贤内自省
12-27 4775
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
vue配置不同命令区分测试环境和生产环境
qq_43364234的博客
12-16 5555
在项目开发过程中，往往会区分出测试环境和线上环境，这里记录一下在使用vue进行开发的时候通过不同的打包指令区分测试和线上环境。 首先我们需要安装cross-env npm i --save-dev cross-env 然后修改package.json文件 "scripts": { "dev": "webpack-dev-server --inline --progress --confi...
【vue】配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境
qq_26780317的博客
08-25 1万+
背景：在前后端分离开发的项目中，一般会有开发环境、测试环境、预上线环境和生产环境。 1.在开发环境下调试接口的时候，一般都会有好几个接口地址，需要根据情况手动来切换接口地址； 2.打包时要部署项目到不同的环境，而这也需要每次都根据情况切换接口地址。 虽然，手动切换地址可以满足需求，但是这种方式不是一种较为便捷的处理方式。我们可以选择一种较为方便的方式来解决这个问题。 ...
Vue配置生产环境和测试环境的参数，.env.production、.env.development怎么用？
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-30 2782
​在项目根目录新建两个文件分别为.env.production文件.env.development文件​。我们下面的例子分开来写只用.env.production.env.development。接下来，我们在app.vue中打印一下我们设置的这个VUE_APP_URL。.env.development文件。.env.production文件。然后配置package.json。无论什么环境都会加载。............
vue环境变量配置——process.env（详细）
大雾起了清晨
08-06 1594
平时开发是用生产环境的，如果发布到线上时，需要切换环境为线上。如果人为去切换也是可以的，但是会容易忘记，可以通过配置不同的运行命令来自动切换环境。框架时，经常用到两种环境，一种是开发环境，就是本地开发时的环境，一种是生产环境，就是要发布到线上的环境。（进程环境，返回一个包含用户环境信息的对象）属性，根据各个环境的配置文件区分和切换环境。只需要在项目启动命令后面修改需要的环境就行了，例如。文件中打印当前环境，输出就成功了。如果有需要可以添加一个。
vue项目环境变量配置的实现方法
12-09
实际开发中，开发环境和生产环境中一些变量是不同的，比如接口地址等等，打包之前需要手动切换。 编译时 新建env.js let baseUrl = ''; if(process.env.NODE_ENV == 'production'){ baseUrl = '...
Vue项目实战：接口错误拦截与环境设置
01-20
import VueAxios from 'vue-axios' axios.defaults.baseURL = '/api'; axios.defaults.timeout = 8000; //接口错误拦截 axios.interceptors.response.use(function(response) { let res = response
vue项目启动命令个人笔记
热门推荐
BHSZZY的博客
12-12 2万+
1.上方的启动命令与相关文件，是根据本人的项目总结的，仅供参考，不同项目细节可能不同。2.项目启动命令可以自己配置，过程如上，需要熟悉node_modules中的一些依赖方法。（本人新学，好多都不熟悉，无从入手，只能先看，总结一波自己理解的）3.可以配置本地vue项目启动时、端口号与访问前缀路径；需要注意的是，项目打包部署到服务器上后又会有所区别，服务器上主要是在nginx中配置访问端口与前缀路径的，而不是在vue项目中。
Vue项目prod保留输出
qq_28584841的博客
10-22 278
最近项目遇到一个问题，需要在生产环境输出跟踪一下问题 但是prod环境会删除console.log 经过查阅一些资料，最后做出了如下解决方案仅供参考 export function printConsole(content) { let print = console; if (print && print.log) { return print.log(content); } } 哪里需要输出，哪里直接调用即可 this.printConsole(
VUE项目使用.env配置多种环境
櫆溟的博客
03-15 9304
VUE项目使用.env配置多种环境
Vue分环境打包
立志欲坚不欲锐，成功在久不在速度
07-07 4085
在项目开发过程中，我们的项目一般分为开发版，测试版，生产版，之前每次发布不同的版本都需要在源码中修改api地址然后再次打包，这样就很麻烦，如果可以根据不同环境进行打包就完美了。 下面就来介绍如何进行分环境打包(前提是你已经创建好了一个vue项目，我这里用的是vue4) 第一步：打包package.json文件 可以看到scripts 我们添加一个test打包环境 "test":"vue-cli-service serve --mode test" 解释：serve是运行命令，s..
vue分环境配置变量及打包
weixin_44794123的博客
12-02 1785
vue分环境配置变量及打包 一，环境配置 a,主要环境： dev prod test vue项目根目录下新建配置文件 .env.dev NODE_ENV="development" BASE_URL="/admin" VUE_APP_UPLOAD_URL='http://y.yy.com:8080' VUE_APP_LOGIN='false' .env.prod NODE_ENV="production" BASE_URL="/" VUE_APP_UPLOAD_URL='http://x.xx.co
启动VUE项目配置
m0_37731220的博客
03-01 693
vue启动配置，及报错问题解决方法
【无标题】vue工程搭建
qq769747518的博客
02-10 88
vue工程搭建
vue -V报错或者vue create 项目名报错出现弹窗说什么缺少标识符
qq_53155466的博客
08-19 1009
vue create 名称 出现报错弹窗
vue项目配置多个环境
05-28
在 Vue 项目中，可以通过设置环境变量来实现不同环境下的不同配置。可以通过在 package.json 文件中设置 scripts 来指定不同的环境变量，例如： ``` "scripts": { "dev": "NODE_ENV=development vue-cli-service ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值