如何管理VUE項目中的環境變量

環境變量管理在Vue項目中至關重要，需根據構建工具選擇正確方式。 1. Vue CLI項目使用VUE_APP_前綴的.env文件，通過process.env.VUE_APP_訪問，如.env.production；2. Vite項目使用VITE_前綴，通過import.meta.env.VITE_訪問，如.env.staging；3. 兩者均支持自定義模式加載對應文件，且應將.env.local類文件加入.gitignore；4. 始終避免在前端暴露敏感信息，提供.env.example供參考，並在運行時校驗必要變量，變量為靜態構建時注入，若需動態配置應使用運行時加載方案。

Managing environment variables in a Vue project is essential for handling different configurations across development, testing, and production environments—especially for API endpoints, feature flags, or third-party service keys. Here's how to do it properly depending on your setup (Vue CLI or Vite), which are the two most common Vue scaffolding tools.

1. Using .env files in Vue CLI

If you're using Vue CLI , it supports environment variables through .env files. These files are automatically loaded during build and serve processes.

Supported .env file types:

• .env – loaded in all cases
• .env.local – loaded in all cases, but ignored by git (use for secrets)
• .env.[mode] – only loaded in specified mode (eg, .env.production )
• .env.[mode].local – same as above, but ignored by git

Example files:

 # .env.development
VUE_APP_API_URL=https://api.dev.example.com
VUE_APP_DEBUG=true

# .env.production
VUE_APP_API_URL=https://api.example.com
VUE_APP_DEBUG=false

Rules to follow:

• Only variables prefixed with VUE_APP_ are embedded into the client bundle.
• Access them via process.env.VUE_APP_YOUR_VAR in your code.

 // In a Vue component or JS file
console.log(process.env.VUE_APP_API_URL);

⚠️ Never store sensitive data (like API secrets) in environment variables that end up in the browser. They are embedded into the JS bundle and are visible to anyone.

2. Environment variables in Vite-based Vue projects

If you're using Vite (common in Vue 3 projects created with create-vue or vite init ), the handling is slightly different.

Vite .env file rules:

• Variables must be prefixed with VITE_ to be exposed to the client code.
• Files: .env , .env.local , .env.[mode] (eg, .env.production )

Example:

 # .env.development
VITE_API_URL=https://api.dev.example.com
VITE_APP_NAME=My App Dev

# .env.production
VITE_API_URL=https://api.example.com
VITE_APP_NAME=My App

Access in code:

 console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.VITE_APP_NAME);

? Vite uses import.meta.env instead of process.env .

3. Using different modes and custom environments

Both Vue CLI and Vite support custom modes.

In Vue CLI:

 # Use a custom mode
vue-cli-service serve --mode staging

It will load .env.staging .

In Vite:

 # In package.json scripts
"scripts": {
  "serve:staging": "vite --mode staging"
}

Then create a vite.config.js to define the mode and load appropriate .env files:

 export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
  return {
    // your config
  };
};

4. Best practices

• Never commit secrets : Add .env.local and .env.*.local to .gitignore .
• Provide examples : Include .env.example in your repo with placeholder values.

   # .env.example
  VUE_APP_API_URL=your_dev_api_url
  VITE_API_URL=your_dev_api_url

• Validate required variables : Check at runtime if critical variables are defined.
• Use them at build time : Environment variables are static—set at build, not runtime. If you need runtime config, consider a config file fetched on load.

---

Summary

Tool	Prefix	Access via	File example
Vue CLI	VUE_APP_	process.env.VUE_APP_*	.env.production
Vite	VITE_	import.meta.env.VITE_*	.env.staging

Choose the right pattern based on your build tool, keep secrets out of the frontend, and use modes to separate environments.

Basically, just name your files correctly, use the right prefix, and access them in code as shown—no extra libraries needed.

以上是如何管理VUE項目中的環境變量的詳細內容。更多資訊請關注PHP中文網其他相關文章！