Nuxt如何在PHP页面指定div中实现app.js水合及查询生成文件路径

架构老林

2026-9-27

Nuxt嵌入PHP页面实现方案

实现步骤

调整Nuxt配置，适配自定义挂载场景
在你的Nuxt项目根目录的nuxt.config.ts（或nuxt.config.js）中添加以下配置：

export default defineNuxtConfig({
  // 关闭SSR，使用纯客户端渲染模式，和你之前使用Vue的逻辑一致
  ssr: false,
  app: {
    // 匹配PHP页面中你预留的挂载节点ID
    rootId: 'app',
    // 部署时如果Nuxt资源放在子目录，需要修改为对应路径，比如`/nuxt-res/`
    baseURL: '/'
  },
  // 开发模式下允许跨域，避免PHP页面和Nuxt dev服务端口不同导致的资源加载失败
  vite: {
    server: {
      cors: true
    }
  }
})

开发阶段（HMR模式）引入资源
启动Nuxt开发服务（默认端口为3000）后，在你的PHP页面的</body>标签前引入以下两个脚本即可完成挂载，同时支持热更新：

<script src="http://localhost:3000/@vite/client"></script>
<script src="http://localhost:3000/_nuxt/entry.js"></script>

生产构建阶段引入资源
执行构建命令后，将Nuxt生成的静态资源拷贝到PHP站点的可访问目录下，再在PHP页面引入对应入口脚本和样式即可。

不同模式下的资源位置

HMR开发模式：所有编译后的资源都存储在内存中，不会写入本地磁盘，全部通过Nuxt开发服务提供访问，核心入口资源路径为/_nuxt/entry.js、/@vite/client。
生产构建模式：执行nuxt build命令后，所有可部署的静态资源会生成在Nuxt项目根目录的.output/public文件夹下，其中入口JS、CSS等资源都存放在该目录的_nuxt子目录中，文件名会自带哈希后缀用于缓存控制。如果是Nuxt2版本，构建产物默认存放在项目根目录的dist文件夹下。