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

这篇具有很好参考价值的文章主要介绍了Vue中process.env关键字,process.env.VUE_APP_BASE_API。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.process.env 是Node.js 中的一个环境

打开命令行查看环境:

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

2.process.env与Vue CLI 项目

Vue Cli 有以下三种运行模式

  • development 模式用于 vue-cli-service serve

  • test 模式用于 vue-cli-service test:unit

  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

我们查看package.json配置信息,运行Vue CLI命令:

  • 开发环境运行npm run dev,

  • 要部署服务器发布生产环境时运行npm run build,

他们正好对应Vue CLI中的development模式和production模式,就会把该模式下的NODE_ENV载入其中了。

既然知道项目运行的是那个模式,是不是我们就可以在不同模式下运行不同的变量信息,如开发环境使用端口8080,线上(生产)环境的端口是80,这个时候你会想,我知道不同模式配置不同信息,那信息配置在那个文件呢?

Vue中process.env关键字,process.env.VUE_APP_BASE_API
1)可以在你的项目根目录中放置下列文件来指定环境变量:

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

会有先后顺序

一个环境文件只包含环境变量的“键=值”对:


#设置端口号
port=9999
# 开发环境配置
ENV = 'development'

只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中

2).env 文件配置
.env:全局默认配置文件,无论什么环境都会加载合并。
.env.development:开发环境的配置文件
.env.production:生产环境的配置文件
Vue中process.env关键字,process.env.VUE_APP_BASE_API

注意文件名是固定的,不要自定义。

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

属性名必须以 VUE_APP_ 开头,如:VUE_APP_XXX

vue 会根据启动命令自动加载相对应的环境配置文件。vue是根据文件名进行加载的,所以不要擅自更改。

  • 比如执行npm run serve命令,会自动加载.env.development文件

  • 开发环境加载 .env 和 .env.development 。

  • 生成环境加载 .env 和 .env.production 。

运行npm run serve的时候主要还是看package.json中 server属性的--mode后面跟的是啥。如果是development,就会加载.env.development文件。

  • vue-cli-service 默认会读取 env.development文件 ;

  • vue-cli-service - -mode dev 指定读取env.dev文件;

在package.json里面配置好,执行serve的时候用开发环境的。build打包用生产或者测试的

package.json 配置项:


"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "build:sit": "vue-cli-service build --mode production.sit",
    "build:uat": "vue-cli-service build --mode production.uat",
    "build:prod": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint",
    "et": "node_modules/.bin/et",
    "et:init": "node_modules/.bin/et -i",
    "et:list": "gulp themes"
  }

环境配置文件 > 全局配置文件

全局的配置文件和环境的配置文件有相同配置项时,环境的配置项会覆盖全局的配置项。

也就是全局的配置文件.env 文件会被.env.development这些覆盖 。

在配置文件中定义的属性在其它文件中如何访问:

可以使用 process.env.xxx 来访问属性
Vue中process.env关键字,process.env.VUE_APP_BASE_API

3.process.env 用来做什么

由于我们的项目需要在不同环境下进行运行(开发,生产,测试等),这避免我们需要多次的去切换请求的地址以及相关的配置,vue-cli2是可以直接在config文件中进行配置的,但是vue-cli4和vue-cli3已经简化了,没有config文件怎么办?

1)建立.env系列文件

首先我们在根目录新建3个文件,分别为.env.development,.env.production,.env.test

注意文件是只有后缀的)。

.env.development 模式用于serve,开发环境,就是开始环境的时候会引用这个文件里面的配置
.env.production模式用于build,线上环境。
.env.test 测试环境
Vue中process.env关键字,process.env.VUE_APP_BASE_API
Vue中process.env关键字,process.env.VUE_APP_BASE_API

4.development模式运行

在项目根目录创建.env.development

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

.env.development文件内容


# 开发环境配置
ENV = 'development'

#设置端口号
port=8081

# 前端请求路径
VUE_APP_BASE_API = '/api'

#后端服务器地址不要忘记添加http或https
BASE_URL_REAR='http://127.0.0.1:8080/'

vue.config.js配置如下

process.env当前运行的配置环境,用于读取对应配置文件的参数

//提示:process.env 是Node.js 中的一个环境,Vue CLI 项目中一个重要的概念
//:有以下三种运行模式
// development 模式用于 vue-cli-service serve
// test 模式用于 vue-cli-service test:unit
// production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
//当配置中有,配置port端口则使用配置的端口反之使用80端口
const port = process.env.port || 80 // 端口
// vue.config.js 配置说明
//官方vue.config.js 参考文档 配置参考 | Vue CLI
// 这里只列一部分,具体配置参考文档
module.exports = {
//build后的输出目录
outputDir: 'dist',
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
lintOnSave: false,
configureWebpack: {
// devtool 添加这个debugger可以看源码
devtool: 'cheap-module-source-map'
},
// webpack-dev-server 相关配置
devServer: {
//本机地址
host: 'localhost',
//获取port端口
port: port,
open: true,
//如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器
proxy: {
// detail: Configuration Reference | Vue CLI
//process.env.VUE_APP_BASE_API的参数会读取对应环境变量数据,如读取的数据是‘/api’,那么意思就是前端请求的/api路径都会被带来到,参数target的地址
[process.env.VUE_APP_BASE_API]: {
//代理的路径
target: process.env.BASE_URL_REAR,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
disableHostCheck: true
},
};

以上配置主要是为了,前端应用和后端 API 服务器没有运行在同一个主机上需要做代理为例。

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

运行 npm run dev 使用到的配置文件为.env.development

配置文件的端口,请求路径,后端服务器地址配置等

网页可以看出端口

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

可能请求接口也拼接了配置路径中的VUE_APP_BASE_API变量数据

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

5.定义自己配置环境

因为我们知道了配置环境的定义,那么只要我们遵循规则定义也可以配置自己的环境数据


.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

我们在根路径添加配置.env.itmei配置如下


# 自己定义的开发环境配置
ENV = 'itmei'
#设置端口号
port=8088
# 前端请求路径
VUE_APP_BASE_API = '/itmei-api'
#后端服务器地址
BASE_URL_REAR='http://127.0.0.1:8080/'
Vue中process.env关键字,process.env.VUE_APP_BASE_API

添加完成后只需要在运行命令添加--mode 配置文件.env.后面自己定义的名称

如我自己配置的.env.itmei配置名称的itmei,为了方便我们在package.json中配置运行脚本

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

配置了上面的就可以使用npm命令运行

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

当然也可以直接使用Vue Cli命令运行vue-cli-service serve --mode itmei

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

首先会去找配置文件.env.itmei、.env.itmei.local 和 .env文件然后构建出生产环境应用

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

如果此时运行VueCli命令mode 的环境名称不存在,首先会去找.env.itmei00或.env.itmei00.local 或.env如找到就能正常运行找不到就报错,由于我定义了.env所以后面就使用.env的配置信息

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

当我把.env删除,找不到会报


building 2/2 modules 0 active ERROR  TypeError: Cannot read property 'upgrade' of undefined
TypeError: Cannot read property 'upgrade' of undefined 
Vue中process.env关键字,process.env.VUE_APP_BASE_API

参考自:Vue中process.env关键字怎么使用,以及前后端不在同一台服务器怎么访问?_vue process.env_Hi梅的博客-CSDN博客

https://www.cnblogs.com/ddqyc/p/15428194.html文章来源地址https://www.toymoban.com/news/detail-417203.html

到了这里,关于Vue中process.env关键字,process.env.VUE_APP_BASE_API的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue 高德地图(@amap/amap-jsapi-loader)的基本使用:添加标记、POI关键字搜索、路线规划...(方法一)

    具体的步骤可以参考我的上一篇博客,有详细说明如何注册申请高德的Key、秘钥,初始化地图等等 vue-amap : vue-amap 基于 Vue 2.x 与高德的地图组件 高德官方介绍:地图 JS API Web服务API简介 高德Web服务API向开发者提供HTTP接口,开发者可通过这些接口使用各类型的地理数据服务,

    2024年01月18日
    浏览(49)
  • ant-vue1.78版a-auto-complete表单自动搜索返回列表中的关键字标红

    通常在做标红的场景,都是后端返回html结构,前端直接渲染实现,但是如果需要前端处理的话,实现也是很简单的,接下来我直接上应用场景吧 应用场景就是通过去调接口,返回的列表前端去标红,接下来我们看代码 接下来就是我们接口调用后的处理逻

    2024年02月10日
    浏览(46)
  • static关键字和final关键字

    在java的中,static和final是两个必须掌握的。static和final用法多样,且在一定环境下使用,可以提高程序的运行性能,优化程序的结构。下面将依次介绍static和final。注意,某些场景下,staic和final可以联合使用

    2024年02月09日
    浏览(58)
  • 搜索引擎优化指南:SEO关键字、长尾关键字、短尾关键字以及反向链接

    SEO 代表“搜索引擎优化”。它是一种数字营销策略,旨在提高网站或网页在搜索引擎未付费结果中的在线可见性。通常,网站在搜索结果页面中排名越高,或在搜索结果列表中显示的频率越高,它将从搜索引擎用户那里获得的访问者就越多。 SEO 策略可以针对各种类型的搜索

    2024年02月04日
    浏览(128)
  • 【iOS】—— 属性关键字及weak关键字底层原理

    参考博客:IOS开发基础——属性(copy strong weak等) 内存管理有关的: weak , assign , strong , retain , copy 线程安全有关的的: nonatomic , atomic 访问权限有关的的: readonly , readwrite (只读,可读写) 修饰变量的: const , static , extern 这些

    2024年02月16日
    浏览(41)
  • 拼多多关键字搜索API-通过关键字获取拼多多商品列表

    pinduoduo.item_search 公共参数 请求地址: pinduoduo/item_search 名称 类型 必须 描述 key String 是 调用key(必须以GET方式拼接在URL中) secret String 是 调用密钥 api_name String 是 API接口名称(包括在请求地址中)[item_search,item_get,item_search_shop等] cache String 否 [yes,no]默认yes,将调用缓存的数据

    2024年02月22日
    浏览(78)
  • ElasticSearch nested 字段多关键字搜索,高亮全部匹配关键字的处理

    ElasticSearch 版本号: 6.7.0 用户会传入多个去ES查询 ElasticSearch nested 字段 的多个字段,要求在返回的结果中被搜索的字段需要高亮所有匹配的。例如同时通过 上海 和 策划 ,再 工作经历 的列表中的 工作内容 和 公司名称 中搜索。如果有人员的 工作经历 中

    2024年04月22日
    浏览(56)
  • 【Java入门】final关键字、static关键字、内部类的认识

    前言 : final是Java中的一个修饰符,用于表示某个变量、方法或者类不能被修改。final可以用于修饰类、方法和变量(局部变量,成员变量)。被final所修饰的类不能被继承,被final所修饰的方法不能被重写,被final所修饰的变量,不能被重新赋值 。 static是Java中的一

    2024年02月11日
    浏览(51)
  • 用python实现给出关键字查找并标注pdf文件中关键字

    要在Python中标注PDF文件中的,可以使用Python的PDFMiner库和Python的matplotlib库。 首先,需要安装这两个库。可以使用pip命令进行安装: shell 复制代码 pip install pdfminer.six matplotlib 接下来,可以使用以下代码实现查找和标注功能: python 复制代码 import pdfminer   from pdf

    2024年01月16日
    浏览(68)
  • Java面向对象——多态、Object类、instanceof关键字以及final关键字

    总之,多态是面向对象编程中一个非常重要的概念,通过它可以实现统一的接口来操作不同的对象,提高代码的可读性和可维护性。在实际编程中,多态性的使用可以使代码更加灵活和扩展性更强。方法重写是实现多态的基础。 重写如下所示 关于hashCode方法的重写: 重写t

    2024年02月12日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包