Environment Variable Management Practice and Multi-Environment Deployment

In the Nuxt framework, environment variable management is a core component of application building and deployment. Developers can define configurations for different environments—such as development, production, or testing—through .env files. For instance, the development environment may include debug logs and local API addresses, while the production environment requires secure keys and optimized build parameters.

Variable Types

  • Global Variables: Applicable across all environments, such as application name and base URL.
  • Local Variables: Effective only in specific environments, such as debug mode in the development environment.

Variable Scope
Nuxt supports accessing variables via process.env. Developers can define global variables through module.exports in nuxt.config.js or dynamically replace them during the build process using environment variables. For example:

export default {
  module: {
    rules: [
      {
        test: '/**/*.js',
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              ['inject', {
                custom: {
                  vars: ['APP_ENV']
                }
              }]
            ]
          }
        }
      }
    ]
  }
}

Multi-Environment Deployment

The Nuxt framework achieves multi-environment deployment through build configuration (nuxt.config.js). Developers can switch environment variables as needed to ensure application performance and security across different stages.

Build Configuration

  • Variable Differentiation: Use different .env files for different environments, such as dev.env and prod.env.
  • Build Option Adjustment: Enable code compression (optimizeDeps) and static resource optimization (minify) in the production environment, while retaining debug information in the development environment.

Deployment Workflow

  1. Development Environment: Use npm run dev; variables are automatically loaded, and debug logs are output.
  2. Production Environment: Generate static resources via npm run build and deploy them using a CDN.
  3. Testing Environment: Use npm run test to verify functionality and prevent production configuration pollution.

Best Practices

  • Standardized Management: Place sensitive variables (such as API keys) in prod.env and use the REACT_APP_ prefix in .env files to avoid polluting global variables.
  • Security Measures: Protect sensitive information using environment variable encryption tools (such as dotenv) and avoid hardcoding.
  • CI/CD Integration: Dynamically load environment variables in continuous integration tools (such as GitHub Actions) to ensure deployment consistency.

Summary

The Nuxt framework achieves flexible deployment strategies through environment variable management. Developers must configure variables appropriately based on the scenario while adhering to best practices to enhance application security and efficiency. Properly managing environment variables is the cornerstone of building reliable systems.