如何通过runtime config在nuxt.config.js中使用.env环境变量

方案1：构建时直接读取.env变量（适合变量无需运行时修改的场景） #

这个方案实现最简单，变量值会在项目构建时固定写入配置。

1. 如果你使用的Nuxt版本低于2.13，先安装dotenv依赖：

npm i dotenv

2. 在nuxt.config.js的最顶部引入dotenv并加载.env文件：

// 放在文件第一行即可
require('dotenv').config()
// 如果你用自定义环境配置文件比如.env.production，可以指定路径
// require('dotenv').config({ path: '.env.production' })

export default {
  // 你原来的其他配置
  auth: {
    strategies: {
      local: {
        endpoints: {
          // 这里直接用process.env读取.env变量即可生效
          login: { url: `${process.env.URL_API}/auth/login`, method: 'post' },
          logout: { url: `${process.env.URL_API}/auth/logout`, method: 'post' },
        },
        // 其他auth配置
      }
    }
  },
  publicRuntimeConfig: {
    URL_API: process.env.URL_API || 'http://localhost:8000/',
  }
}

方案2：运行时动态覆盖配置（适合多环境免单独构建的场景） #

如果你的需求是修改.env变量后重启服务就能生效，不需要重新构建项目，可以用插件动态修改auth模块配置：

1. 先在nuxt.config.js的publicRuntimeConfig中正常声明变量：

export default {
  publicRuntimeConfig: {
    URL_API: process.env.URL_API || 'http://localhost:8000/',
  },
  // 注册插件，注意要设置仅客户端生效，auth模块仅在客户端运行
  plugins: [
    { src: '~/plugins/auth-config.js', mode: 'client' }
  ],
  // auth配置可以先写死占位，后续插件会覆盖
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/login', method: 'post' },
          logout: { url: '/auth/logout', method: 'post' },
        },
        // 其他auth配置
      }
    }
  }
}

2. 新建plugins/auth-config.js插件文件，内容如下：

export default function ({ $auth, $config }) {
  // 从运行时配置中读取变量，动态覆盖auth的接口地址
  const baseUrl = $config.URL_API
  $auth.strategies.local.options.endpoints.login.url = `${baseUrl}/auth/login`
  $auth.strategies.local.options.endpoints.logout.url = `${baseUrl}/auth/logout`
  // 其他需要动态修改的auth配置都可以在这里扩展
}

内容的提问来源于stack exchange，提问作者Andy