定义环境变量

环境变量一般存放在项目根目录下的 .env 文件中，变量名需要以 NUXT_ 开头。

以连接数据库为例，因为正式环境和开发环境的连接参数不同，所以现在要区分两套，一套是正式环境的，一套是开发环境的。

在项目根目录创建 .env.production 文件和 .env.development 文件，定义连接数据库的变量

.env.production 文件内容

# 正式环境
NUXT_MYSQL_HOST=localhost
NUXT_MYSQL_PORT=3306
NUXT_MYSQL_USER=root
NUXT_MYSQL_PASSWORD=123456
NUXT_MYSQL_DATABASE=box

.env.development 文件内容

# 开发环境
NUXT_MYSQL_HOST=localhost
NUXT_MYSQL_PORT=3306
NUXT_MYSQL_USER=root
NUXT_MYSQL_PASSWORD=987654321
NUXT_MYSQL_DATABASE=pbox

引入 evn 文件

在 package.json 中显式引入，指定要用哪个 .env 文件，这一步很重要！！！

"scripts": {
  "build": "nuxt build --dotenv .env.production",
  "dev": "nuxt dev --dotenv .env.development",
  "generate": "nuxt generate",
  "preview": "nuxt preview",
  "postinstall": "nuxt prepare"
}

使用环境变量

在开发环境可以在其他地方通过 process.env 访问到环境变量，但是在生产环境不行。

这是因为开发环境Nuxt服务器直接读取.env文件，将变量注入到 process.env 中，生产环境下环境变量需要在构建时确定，运行时无法动态读取 .env 文件。

而 nuxt.config.ts 是在构建时执行的，此时可以直接读取 .env 文件中的变量。

所以为了生产环境下能成功使用环境遍历，需要将环境变量引用到运行时配置中。

nuxt.config.ts 文件

export default defineNuxtConfig({
  runtimeConfig: {
    // 私有密钥仅在服务器端可用
    mysqlConfig:{
      host:process.env.MYSQL_HOST,
      port:process.env.NUXT_MYSQL_PORT,
      user:process.env.NUXT_MYSQL_USER,
      password:process.env.NUXT_MYSQL_PASSWORD,
      database:process.env.NUXT_MYSQL_DATABASE,
    }
  }
})

这样在连接数据库时就可以通过 useRuntimeConfig 访问到环境变量了。

mport mysql from 'mysql2/promise';

const {mysqlConfig} = useRuntimeConfig()
const {host,port,user,password,database} = mysqlConfig

const pool = mysql.createPool({
  host,
  port,
  user,
  password,
  database,
  waitForConnections: true,
  connectionLimit: 10, // 连接池最大连接数
  queueLimit: 0, // 无限制排队请求数，
  multipleStatements: true,
  dateStrings: true // 强制日期作为字符串返回而不是 JavaScript Date 对象
})