vue的环境变量 （根据开发环境不同执行不同的代码）

最新推荐文章于 2023-08-30 16:57:53 发布
最新推荐文章于 2023-08-30 16:57:53 发布
阅读量243 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62681656/article/details/131252373
版权

1.创建环境变量文件

          在vue的根目录创建

   文件：

          .env.development   ==》 开发环境

          .env.production      ==》 生产环境

2.   env.development 中的代码 

          必须以  VUE_APP_BASE_URL 为命名 

          

       调用要重启该项目

 3. 调用 .env 文件中变量

      process.env.VUE_APP_***

大卫的纯爱战士
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
详解vue 不同环境配置不同的打包命令
12-11
`cross-env`的作用是在跨平台上设置和使用环境变量，确保`NODE_ENV`可以在任何操作系统上正确地被设置。你可以通过以下命令安装： ```bash npm i --save-dev cross-env ``` 或者，你也可以在`package.json`的`...
vue项目(vue-cli)配置环境变量和打包时区分开发、测试、生产环境
黎小小的博客
02-14 3810
NODE_ENV 设置为 "test"，Vue CLI 会创建一个优化过后的，并且旨在用于单元测试的 webpack 配置，它并不会处理图片以及一些对单元测试非必需的其他资源。在自定义配置Vue-cli 的过程中，想分别通过.env.development .env.test .env.production 来代表开发、测试、生产环境。3、NODE_ENV=“someone”，环境变量随便给一个值，它会默认为NODE_ENV=“development” 的打包策略。
vue配置开发环境和生产环境
xia_tian666的博客
09-23 9435
本文主要介绍开发、测试以及生产环境的配置。
Vue2.0教程 （二）开发环境生产环境变量配置
燃燃的大尾巴
07-25 1418
vue脚手架
vue的环境配置 生产环境和开发环境配置
真真的博客
06-29 1万+
vue的环境配置 生产环境和开发环境配置
关于mybatis的config.xml配置文件
qq_44505797的博客
09-25 305
开发工具与关键技术： Java 作者：肖广斌 撰写时间：2020年9月25日 当我们在eclipse下载好mybatis的插件后，我们创建web项目的时候就可以引用mybatis框架了，所以我们需要配置一个mybatis的config.xml文件，让其来连接我们的数据库，关于配置开发环境有两种方式，我们可以导入外部文件也可以直接在mybatis的config.xml文件中配置我们的开发环境，如下图，第一种：这是通过外部文件配置开发环境，在外部文件中已经写好了url，driver，username，passw
浅析vue给不同环境配置不同打包命令
12-04
在开发环境（dev.env.js）中，除了基础配置外，我们通常还需要配置服务代理，以处理跨域请求。例如： ```javascript module.exports = merge(prodEnv, { NODE_ENV: '"development"', EVN_CONFIG: '"dev"', API_...
详解vue.js根据不同环境(正式、测试)打包到不同目录
12-09
通过以上步骤，Vue.js项目可以根据环境变量自动选择正确的打包配置，将应用打包到不同的目录。这对于团队协作和持续集成/持续部署（CI/CD）流程至关重要，因为它确保了每个环境的代码隔离，避免了混淆和错误。记得在...
vue-cli3添加模式配置多环境变量的方法
12-09
在代码中，可以根据环境变量来决定执行的逻辑。例如，使用 `process.env.VUE_APP_BUILD_TYPE` 来判断是否处于预发环境，并根据此设置不同的接口 URL 或开启/关闭埋点脚本： ```javascript const IS_UAT = ...
vue-cli3 配置开发与测试环境详解
11-29
是基于 vue-cli3.1.1 的单页应用，目前测试环境和生产环境都在线上，并且都在同一个域名下，其中生产环境部署在根目录下，测试环境部署在名为 test 的子目录下，根据生产环境和测试环境的不同，某些界面和交互有细微...
vue配置开发环境，测试环境，生产环境
Lc_style的博客
04-18 6441
开发环境：一般是本地开发时所使用的环境，改动很频繁 测试环境：较为稳定的版本，一般用于部署测试 生产环境：发布到线上的版本 配置不同环境变量可避免切换不同环境时手动修改项目配置，请求url等，vue项目中可先在package.json文件中这样设置： "scripts": { "dev": "vue-cli-service serve --mode development", //开发环境 "dev:test": "vue-cli-service serve --mode t.
vue 环境变量配置和使用环境变量方式
最新发布
weixin_39273589的博客
08-30 1116
Vue的环境变量配置提供了一种在不同环境中使用不同配置的方式，以便在开发、测试和生产等不同场景下使用不同的配置。
Vue2.X环境变量配置及其作用
weixin_44482359的博客
08-16 857
最近在做运维时，遇到了一个要将原有项目重新部署的问题，该项目特殊在需要PC端和移动端相互转换，简单来说就是需要识别访客使用的什么设备来进行访问的，例如如果访客使用手机打开的PC端地址，就会自动跳转至手机端，以此来实现页面的适配效果，这样也就会导致测试环境和生产环境所跳转的地址不同，以此在打包时不能总是进行改代码进行打包部署，就想着通过一种方式来制定在打包时读取特定的配置，因此环境变量就是用来解决这个问题的。...
Vue 配置开发/生产环境变量、build生产环境关掉log
chuangshaoxia5899的博客
07-15 706
项目有开发阶段和测试、生产阶段，需要根据不同的环境做不同的配置，比如，接口地址不同，比如生产环境关掉log 一、配置环境变量 1、项目中，是有一个 config 文件夹的，顾名思义，是一些配置文件，其中里面包含了，环境变量的文件、配置跨域等：如下图 dev.env.js => ...
vue项目针对不同的环境配置不同的命令行(打包和运行)
Abez_c的博客
05-12 1989
1.需要安装下载cross-env; npm i --save-dev cross-env 2.在vue项目目录下的config文件夹下创建文件 当前项目分为四种环境:开发环境(dev)、测试环境(test)、预生产环境(pre)、生产环境(prod); 由于config文件下已经存在了开发环境和生产环境的文件，后期只需要修改内容即可，所以需要再创建test和pre的文...
Vue 多环境变量的配置
努力
08-26 2171
为什么配置多环境变量呢？ 在我们开发的过程中，会有多个不同的访问环境比如：开发环境 、 生产环境 等等。在每一种环境下所需要访问的域名都是不一样的，所以可以通过配置多环境变量来解决这一问题。 一、在Vue中首先找到 package.json 文件 二、找到文件中的scripts添加新的配置 "scripts":{ "serve":"vue-cli-serviceserve--open", //npm run serve 启动项目 ......
Vue.js - 判断当前是开发环境、还是生产环境（附样例）
热门推荐
LuckyTHP
03-08 2万+
1，判断样例 （1）有时我们需要在代码中判断目前项目是处于开发环境、还是生产环境，然后根据不同环境执行不同的逻辑代码。下面是一个简单的样例： if (process.env.NODE_ENV === "development") { alert("开发环境"); }else { alert("生产环境"); } （2）如果在开发环境（执行 npm run dev 的时候），则显示如下结果： （3）如果在生产环境（执行 npm run build 的时候），则显示如下结果： 2，判断原理 （1）
vue中如何区分不同的环境
weixin_47450807的博客
03-04 4086
我们在vue开发中常常要根据不同的环境区分不同的变量，常见的环境有如下几种： 生产环境：production, 开发环境：development, 测试环境：test。 方式一、手动修改不同的变量 const BASE_URL = 'http://dlfordmc.org/dev' const BASE_NAME = 'coder' // const BASE_URL = 'http://dlfordmc.org/prod' // const BASE_NAME = 'kobe' // const BA
vue配置环境变量的几种方式
weixin_46913268的博客
07-07 4672
vue配置环境变量的几种方式
vue2 配置生产环境和开发环境步骤
07-27
配置 Vue.js 2.x 的开发环境和生产环境，以下是一些基本的步骤： 1. 开发环境配置： - 安装 Node.js：Vue.js 依赖于 Node.js 运行环境。请确保已经在您的计算机上安装了最新版本的 Node.js。 - 使用 Vue CLI 创建新的 Vue 项目：Vue CLI 是一个官方提供的命令行工具，可以快速创建和管理 Vue 项目。您可以使用以下命令全局安装 Vue CLI： ``` npm install -g @vue/cli ``` - 创建新的 Vue 项目：在命令行中执行以下命令以创建新的 Vue 项目： ``` vue create my-project ``` - 进入项目目录并启动开发服务器：使用以下命令进入项目目录并启动开发服务器： ``` cd my-project npm run serve ``` - 开发环境配置文件：在项目根目录下会有一个 `.env.development` 文件，您可以在此文件中设置开发环境所需的配置项，如 API 地址、调试模式等。这个文件会在开发过程中被自动加载。 2. 生产环境配置： - 生产环境变量配置文件：在项目根目录下会有一个 `.env.production` 文件，您可以在此文件中设置生产环境所需的配置项，如 API 地址、版本号等。这个文件会在构建生产版本时被自动加载。 - 构建生产版本：使用以下命令构建生产版本的代码： ``` npm run build ``` - 部署生产版本：构建完成后，会生成一个 `dist` 目录，里面包含了打包好的生产代码。将该目录下的文件部署到服务器上即可。 这些是配置 Vue.js 2.x 的开发环境和生产环境的基本步骤。请根据实际需求进行适当的配置和优化。如果需要更详细的信息和指南，建议查阅 Vue.js 官方文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值