Managing environment variables in Vue applications requires specific rules and using .env files. First, only variables prefixed with VUE_APP_ will be exposed to the application; second, different environments correspond to different .env files, such as .env.development, .env.production, etc.; third, variables are injected during construction and cannot be changed at runtime. The specific steps include: 1. Create a .env file in the project root directory; 2. Use the corresponding .env files according to the pattern, such as .env.staging; 3. Access variables through process.env in the code; 4. You can import the variables into config.js for unified management; 5. If you need multiple environments to support, you can define scripts in package.json to simplify operations. Note that variable values ??are always strings, you need to convert the types manually, and avoid storing sensitive information on the client side.

Managing and accessing environment variables in a Vue application is straightforward, but there are some important rules and best practices to follow. The key lies in using .env files properly and understanding how Vue CLI handles variable injection.

Understanding Environment Variables in Vue

Vue uses the concept of environment variables defined in .env files located in your project root. These variables can be accessed throughout your app via process.env .

There are a few important rules:

• Only variables prefixed with VUE_APP_ will be exposed to your app.
• Different environment files are used depending on the mode you're running: .env , .env.development , .env.production , etc.
• Values ??are injected at build time, so they're static and not changeable without rebuilding.

For example:

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

Then in your code:

 console.log(process.env.VUE_APP_API_URL)

How to Create and Use Environment Files

You don't need any extra packages—just create .env files in the root of your project.

Here's how it works:

• .env : loaded in all environments
• .env.development : only when NODE_ENV=development
• .env.production : only when NODE_ENV=production
• .env.local : overrides .env (also supports mode-specific versions like .env.development.local )

Example file structure:

 .env
.env.development
.env.production
.env.staging

Each file contains key-value pairs:

 VUE_APP_API_URL=https://api.example.com
VUE_APP_DEBUG_MODE=true

These values ??become available as strings in your app:

 const apiUrl = process.env.VUE_APP_API_URL

Note: Even numbers or booleans are read as strings, so you may need to convert them manually.

Accessing Environment Variables in Vue Components

Once defined, environment variables are accessible anywhere in your app where process.env is available—this includes Vue components, services, and Vuex stores.

In a Vue component:

 <template>
  <div>Current API URL: {{ apiURL }}</div>
</template>

<script>
export default {
  data() {
    return {
      apiURL: process.env.VUE_APP_API_URL
    }
  }
}
</script>

If you have many variables, consider creating a config.js file:

 // config.js
export default {
  apiUrl: process.env.VUE_APP_API_URL,
  debugMode: process.env.VUE_APP_DEBUG_MODE === 'true'
}

Then import it wherever needed:

 import config from '@/config'
console.log(config.apiUrl)

This keeps things clean and makes it easier to manage changes later.

Handling Multiple Environments Like Staging or Testing

If your app has more than dev and prod environments (like staging or testing), you can support those by creating custom .env files.

For example:

• .env.staging
• .env.testing

Then run your app with a specific mode:

 npm run serve --mode staging

Or build for that mode:

 npm run build --mode staging

This tells Vue CLI to load .env.staging along with .env .

Make sure you define scripts in package.json for convenience:

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

Now you can easily build for different targets without confusion.

That's the core of managing environment variables in Vue apps. It's simple once you know how the .env files work and how to access them. Just remember to always use the VUE_APP_ prefix and keep sensitive data out of client-side variables.

The above is the detailed content of How can environment variables be managed and accessed within a Vue application?. For more information, please follow other related articles on the PHP Chinese website!