Nuxt.js 3从MySQL取数遇插件格式报错，求解决方案

解决Nuxt 3中MySQL数据展示的插件警告及优化方案 #

1. 修复Nuxt 3插件格式警告

你当前的插件使用了Nuxt 2的旧格式，Nuxt 3要求通过defineNuxtPlugin定义插件，并且必须限定数据库连接仅在服务端执行（避免客户端暴露数据库凭证或尝试建立无效连接）。

修改plugins/mysql.js：
如果继续使用原mysql包：

import mysql from 'mysql'
import { defineNuxtPlugin } from '#app'

// 仅在服务端初始化数据库连接
if (process.server) {
  const connection = mysql.createConnection({
    host: 'myhost',
    user: 'myusername',
    password: 'mypassword',
    database: 'mydatabase',
  })

  connection.connect(err => {
    err ? console.error('数据库连接失败:', err) : console.log('数据库连接成功')
  })

  export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.inject('mysql', connection)
  })
}

更推荐使用mysql2/promise（原生支持Promise，无需手动封装回调）：
先安装依赖：

npm install mysql2

再修改插件：

import { createConnection } from 'mysql2/promise'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(async nuxtApp => {
  if (process.server) {
    const connection = await createConnection({
      host: 'myhost',
      user: 'myusername',
      password: 'mypassword',
      database: 'mydatabase',
    })
    nuxtApp.inject('mysql', connection)
  }
})

2. 优化页面数据获取逻辑

Nuxt 3中推荐使用useAsyncData替代兼容模式的asyncData，结合useNuxtApp获取注入的数据库服务，代码更简洁：

修改pages/index.vue：

<template>
  <div>
    <h1>Test Table Data</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Last Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row.id">
          <td>{{ row.id }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.lastName }}</td>
          <td>{{ row.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
const nuxtApp = useNuxtApp()
// 缓存数据避免重复查询，key为'test-data'
const { data: rows } = await useAsyncData('test-data', async () => {
  const [results] = await nuxtApp.$mysql.execute('SELECT * FROM test')
  return results
})
</script>

如果坚持使用原mysql包的回调写法，可保留asyncData但需确保仅在服务端执行：

<script>
export default {
  async asyncData({ $mysql }) {
    const rows = await new Promise((resolve, reject) => {
      $mysql.query('SELECT * FROM test', (error, results) => {
        error ? reject(error) : resolve(results)
      })
    })
    return { rows }
  }
}
</script>

3. 生产环境优化建议

• 使用数据库连接池替代单连接，避免高并发场景下连接耗尽：

  // 插件中改用连接池（mysql2示例）
  import { createPool } from 'mysql2/promise'
  export default defineNuxtPlugin(async nuxtApp => {
    if (process.server) {
      const pool = createPool({
        host: 'myhost',
        user: 'myusername',
        password: 'mypassword',
        database: 'mydatabase',
        connectionLimit: 10, // 限定最大连接数
        queueLimit: 0
      })
      nuxtApp.inject('mysql', pool)
    }
  })
  

内容的提问来源于stack exchange，提问作者Oscar S.