vue如何配置使用env文件详细介绍

前言

在 Vue 项目中，.env 文件用于管理不同环境下的配置变量，比如 API 地址、端口号、密钥等。Vue CLI 3+ 内置了对 .env 文件的支持，下面为你详细介绍如何配置和使用。

1..env文件的命名规则

Vue CLI 会根据不同的环境加载对应的 .env 文件，具体规则如下：

• .env：所有环境都会加载
• .env.development：开发环境（npm run serve）
• .env.production：生产环境（npm run build）
• .env.test：测试环境
• .env.local：本地环境配置（会被 git 忽略）
• .env.development.local：开发环境的本地配置

2..env文件的格式

.env 文件采用 KEY=VALUE 的格式，每行一个变量，例如：

# 基础配置
NODE_ENV=production
VUE_APP_TITLE=My App

# API 配置
VUE_APP_API_URL=https://api.example.com
VUE_APP_TIMEOUT=5000

# 第三方服务密钥
VUE_APP_GOOGLE_MAPS_KEY=your_google_maps_key

3. 环境变量的访问方式

在 Vue 项目中，环境变量需要以 VUE_APP_ 为前缀才能被应用代码访问，例如：

// 在组件中访问环境变量
export default {
  created() {
    console.log(process.env.VUE_APP_TITLE);
    console.log(process.env.VUE_APP_API_URL);
  }
}

// 在模板中使用
<template>
  <div>{{ process.env.VUE_APP_TITLE }}</div>
</template>

4. 特殊的环境变量

除了自定义的环境变量，Vue CLI 还提供了一些内置的环境变量：

• NODE_ENV：环境模式（development、production 或 test）
• BASE_URL：应用部署的基础路径，对应 vue.config.js 中的 publicPath

5. 配置示例

下面是一个完整的配置示例：

.env.development（开发环境）

NODE_ENV=development
VUE_APP_TITLE=My App - Development
VUE_APP_API_URL=http://localhost:3000/api
VUE_APP_DEBUG=true

.env.production（生产环境）

NODE_ENV=production
VUE_APP_TITLE=My App
VUE_APP_API_URL=https://api.example.com
VUE_APP_DEBUG=false

6. 在vue.config.js中使用环境变量

在 vue.config.js 中，可以直接访问 .env 文件中的变量，无需添加 VUE_APP_ 前缀：

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
  devServer: {
    proxy: {
      '/api': {
        target: process.env.VUE_APP_API_URL,
        changeOrigin: true
      }
    }
  }
}

7. 加载优先级

环境变量的加载遵循以下优先级（后面的会覆盖前面的）：

1. .env
2. .env.local（仅在非测试环境加载）
3. .env.{mode}
4. .env.{mode}.local

8. 注意事项

• 环境变量在构建时会被静态替换，所以在运行时无法动态修改
• 不要在 .env 文件中存储敏感信息（如密码、密钥等），除非你确定这些文件不会被提交到版本控制
• 可以通过 .gitignore 文件忽略本地环境配置文件：

  .env.local
  .env.development.local
  .env.test.local
  .env.production.local
  

通过合理配置 .env 文件，你可以轻松管理不同环境下的配置，使项目开发和部署更加灵活高效。

到此这篇关于vue如何配置使用env文件的文章就介绍到这了,更多相关vue配置使用env文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论