关于process.env.VUE_APP_BASE_URL的使用-Toy模板网

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

process.env.VUE_APP_BASE_URL

是一个 Vue.js 中使用的环境变量，通常用来存储一个应用的接口请求地址，例如 API 服务器的地址等。

在 Vue CLI 3 以上的版本中，当你在项目根目录下创建一个名为 .env.[mode] 的文件；其中 [mode] 是你的模式名称，例如 .env.development，并在其中设置 VUE_APP_BASE_URL 的值，那么这个值就会被自动注入到项目中。如下：

在这里我们创建了一个 .env.dev 和 .env.production

process.env.base_url,vue.js,前端,javascript
以 .env.production为例：

// 在.env.production文件中
NODE_ENV='production'

VUE_APP_TITLE='prod'

/* 请求接口地址 */
VUE_APP_BASE_URL = 'https://lxxx.sxxx.com'

NODE_ENV 的值可以是 development、production 或 test，用于区分不同的环境。
在这个配置中，NODE_ENV='production' 表示当前运行的环境是开发环境。
VUE_APP_TITLE='prod' 则是一个自定义的环境变量。

Vue.js 会根据 NODE_ENV 的值，自动加载对应的环境配置文件。
你也可以自定义其他字段，如：VUE_APP_LOGO='xxx'，需要注意的是自定义字段必须以VUE_APP_作为开头，否则它将被视为项目级别的环境变量，而不是系统级别的环境变量，导致影响上下文的生效。

这个变量可以在 Vue.js 代码中通过 process.env.拼接自定义字段访问到。
如：process.env.VUE_APP_BASE_URL；你可以在 Vue.js 项目的任何地方访问到这个值。

在运行项目时，你可以使用 --mode 参数来指定使用哪个环境文件，例如：文章来源地址https://www.toymoban.com/news/detail-570206.html

// 在package.json文件中

  "scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode production"
  },

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

关于process.env.VUE_APP_BASE_URL的使用