[配置]VUE中通过process.env判断开发，测试和生产环境，并分环境配置不同的URL HOST

最新推荐文章于 2024-07-05 11:14:44 发布

沉、睡

最新推荐文章于 2024-07-05 11:14:44 发布

阅读量1.4k

点赞数

文章标签： java linux python docker vue

本文链接：https://blog.csdn.net/zz975896590/article/details/119991147

版权

[配置]VUE中通过process.env判断开发，测试和生产环境，并分环境配置不同的URL HOST

process.env是什么？

process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。NODE_ENV 就是其中的一个环境变量。这个变量主要用于标识当前的环境(生产环境，开发环境)。

在 Vue 中， NODEENV 可以通过 .env 文件或者 .env.[mode] 文件配置。配置过后，运行 Vue CLI 指令( npm run dev(serve) ，npm run build )时，就会将该模式下的NODEENV载入其中了。而这些命令，都有自己的默认模式：

npm run dev(serve) ，其实是运行了 vue-cli service serve ，默认模式为 development 。可以在 .env.development 文件下修改该模式的 NODE_ENV 。

npm run build ，其实运行了 vue-cli service build ，默认模式为 production 。可以在 .env.production 文件下修改该模式的 NODE_ENV

1.在项目根目录分别创建.env.development、.env.preview、.env.production三个文件

.env.development
.env.preview
.env.production

三个文件分别对应开发环境、测试环境、生产环境

2.在文件里定义常量

VUE_APP_API_BASE_URL=http://127.0.0.1:6060

3.使用： process.env.VUE_APP_API_BASE_URL

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

沉、睡

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue中使用axios给生产环境和开发环境配置不同的 baseUrl:process.env.BASE_API

05-18

7540

https://blog.csdn.net/qq_41348029/article/details/84133983 第一步：设置不同的接口地址找到文件：/config/dev.env.js 代码修改为： const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_...

vue测试环境、正式环境、本地环境 process.env.NODE_ENV

提筆為青春

05-18

3834

process.env.NODE_ENV 是什么？在node中，有全局变量process表示的是当前的node进程。 process.env包含着关于系统环境的信息，但是process.env中并不存在NODE_ENV这个东西。 NODE_ENV是一个用户自定义的变量，在webpack中它的用途是判断生产环境或开发环境。二、process.env.NODE_ENV该如何配置？修改路径步骤 1：找到build.js 文件将process.env.NODE_ENV = 'production'注释

参与评论您还未登录，请先登录后发表或查看评论

关于process.env.VUE_APP_BASE_URL的使用 -- Vue2

m0_66675766的博客

04-11

9567

是一个 Vue.js 中使用的环境变量，可以用来存储一个应用的基本URL地址，例如 API 服务器的地址。在 Vue CLI 3 以上的版本中，当你在项目根目录下创建一个名为。则是一个自定义的环境变量。这个变量可以在 Vue.js 代码中通过。你可以在 Vue.js 项目的任何地方通过。其中 [mode] 是你的模式名称，例如。的值，那么这个值就会被自动注入到项目中。的值，自动加载对应的环境配置文件，例如。表示当前运行的环境是开发环境。在运行项目时，你就可以使用

process.env 管理 Vue 项目的环境变量（Vue项目中环境变量的配置及调用）

热门推荐

后知后觉

12-05

11万+

vue-cli3的源码部分：@vue/cli-service/lib/util/resolveClientEnv.js module.exports = function resolveClientEnv (options, raw) { const env = {} Object.keys(process.env).forEach(key => { if (pre...

详解vue+axios给开发环境和生产环境配置不同的接口地址

10-16

7. **配置文件和实例化axios**：在Vue组件中，可以在`created`钩子函数中配置axios实例，设置接口前缀，并根据环境变量判断当前是开发环境还是生产环境，从而决定使用哪个接口前缀。例如，使用环境变量`process.env....

构建vue项目配置和环境配置

蛋蛋老公的博客

08-01

852

注意：变量名必须以 VUE_APP_ 开头，这样才能在项目中被识别为环境变量。新建文件.env.development。新建文件.env.development。新建文件.env.production。新建文件.env.production。vite中获取环境变量。vue中获取环境变量。

Vue中process.env关键字，process.env.VUE_APP_BASE_API

coinisi_li的博客

01-04

3万+

Vue Cli 有以下三种运行模式development 模式用于 vue-cli-service servetest 模式用于 vue-cli-service test:unitproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2e我们查看配置信息，运行Vue CLI命令：开发环境运行npm run dev，要部署服务器发布生产环境时运行npm run build，

Node.js中环境变量process.env的一些事详解

10-19

主要给大家介绍了关于Node.js中环境变量process.env的一些事，文中通过示例代码介绍的非常详细，对大家学习或者使用node.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。

VUE路由下 mode:‘history‘, base:process.env.BASE_URL的含义

YY的博客

12-23

2174

VUE路由下 mode:‘history‘, base:process.env.BASE_URL的作用

qq_42898184的博客

07-15

1万+

VUE路由下 mode:‘history’, base:process.env.BASE_URL的作用 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。例如： histroy: localhost:8080/user/list hash:

关于router里面的base: process.env.BASE_URL 知识分析

weixin_43416349的博客

05-04

1万+

2. base也比较好理解，代表着是基本的路由请求的路径。参考：https://router.vuejs.org/zh/api/#base 如： base: '/app/' 那么所有的请求都会在url之后加上/app/ 应用的基路径。例如，如果整个单页应用服务在/app/下，然后base就应该设为"/app/" BASE_URL-这个在vue.config.js 里面有对应的publicPathoption ，同时是你的应用部署的基本路径 ...

关于router里面的base process.env.BASE_URL 知识分析

geejkse_seff的博客

03-09

2013

2. base也比较好理解，代表着是基本的路由请求的路径。参考：https://router.vuejs.org/zh/api/#base 如： base: ‘/app/’ 那么所有的请求都会在url之后加上/app/ 应用的基路径。例如，如果整个单页应用服务在/app/下，然后base就应该设为"/app/" BASE_URL-这个在vue.config.js 里面有对应的?publicPathoption ，同时是你的应用部署的基本路径 ...

process.env.VUE_APP_BASE_API

敲厉害的燕宝的博客

07-04

615

例如，你的API可能在开发环境指向本地服务器 (http://localhost:8080/api)，而在生产环境指向远程服务器 (https://api.example.com)。在这些.env文件中，你可以通过 VUE_APP_BASE_API=http://your-api-url 的形式来设置VUE_APP_BASE_API的值。在Vue.js项目中，特别是使用Vue CLI进行配置的项目，process.env.VUE_APP_BASE_API 是一个。

vue使用process.env搭建自定义运行环境

GeniusXYT的博客

04-12

4782

一、vue-cli项目下默认有三种模式： development：在 vue-cli-service serve 时使用。 production：在 vue-cli-service build 和 vue-cli-service test:e2e 时使用。 test：在 vue-cli-service test:unit 时使用。对应的 NODE_ENV 值分别为 development、production、test。二、可以通过环境文件来指定环境变量，环境文件有一下几个类型： .env：在所

process.env.NODE_ENV测试环境

08-24

process.env.NODE_ENV测试环境的配置可以按照以下步骤进行： 1. 找到build.js文件，将`process.env.NODE_ENV = 'production'`注释掉。 2. 找到webpack.prod.conf.js文件，将`const env = require('../config/prod.env')`修改成动态的`const env = require(`../config/${process.env.NODE_ENV}.env`)`。 3. 在config文件夹中添加test.env.js文件，并在文件中添加以下内容： ``` 'use strict' module.exports = { NODE_ENV: '"test"' } ``` 4. 安装cross-env模块，因为node没有这个模块，需要运行`npm install --save-dev cross-env`进行安装。 5. 找到package.json文件，修改"scripts"部分如下： ``` "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "test": "cross-env NODE_ENV=test node build/build.js", "build": "cross-env NODE_ENV=production node build/build.js" } ``` 完成以上步骤后，你就可以使用`npm run test`来在测试环境中使用代码打包了。123 #### 引用[.reference_title] - *1* *3* [vue测试环境、正式环境、本地环境 process.env.NODE_ENV](https://blog.csdn.net/sinat_41549289/article/details/116997677)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [深入理解webpack process.env.NODE_ENV配置](https://download.csdn.net/download/weixin_38515897/13131654)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]