Wordpress集成Nuxt保留全Vue/混合页面两类逻辑的方案咨询

前置配置：调整 Nuxt 输出规则 #

首先修改 Nuxt 配置文件，适配 WordPress 嵌入场景：

// nuxt.config.ts
export default defineNuxtConfig({
  // 优先用纯客户端渲染，无需额外维护Node服务，适合渐进式迁移场景
  ssr: false,
  // 生产环境资源路径，对应你上传到WordPress的目录地址
  app: {
    baseURL: '/wp-content/themes/你的主题名/nuxt-dist/'
  },
  // 开启manifest生成，用于自动读取构建后的资源路径
  experimental: {
    emitManifest: true,
    // 混合页面需要暴露Vue组件为自定义元素时开启
    customElements: true
  },
  // 开发环境配置，避免跨域
  devServer: {
    port: 3000,
    cors: {
      origin: '你的WordPress站点域名'
    }
  },
  // 混合页面需要暴露的Vue组件列表
  customElements: {
    entries: [
      '~/components/CommentBlock.vue',
      '~/components/ProductCard.vue'
    ]
  }
})

WordPress 端自动加载资源实现 #

写一个通用加载函数，自动适配开发环境HMR和生产环境静态资源，无需每次构建手动修改资源路径：

// 放在主题的functions.php里
function enqueue_nuxt_assets() {
    // 配置项，按实际情况修改
    $is_dev = true; // 生产环境改为false
    $nuxt_dev_host = 'http://localhost:3000';
    $nuxt_prod_dir = get_template_directory() . '/nuxt-dist/';
    $nuxt_prod_uri = get_template_directory_uri() . '/nuxt-dist/';

    if ($is_dev) {
        // 开发环境加载HMR资源
        wp_enqueue_script('nuxt-hmr', $nuxt_dev_host . '/@vite/client', [], null, true);
        wp_enqueue_script('nuxt-entry', $nuxt_dev_host . '/@/entry.js', [], null, true);
        return;
    }

    // 生产环境读取manifest加载所有带哈希的资源
    $manifest_path = $nuxt_prod_dir . '.vite/manifest.json';
    if (!file_exists($manifest_path)) return;
    $manifest = json_decode(file_get_contents($manifest_path), true);
    $entry_asset = $manifest['.vite/entry.js'] ?? [];

    // 加载CSS资源
    if (!empty($entry_asset['css'])) {
        foreach ($entry_asset['css'] as $css) {
            wp_enqueue_style('nuxt-css-' . md5($css), $nuxt_prod_uri . $css, [], null);
        }
    }

    // 加载JS入口和依赖资源
    if (!empty($entry_asset['file'])) {
        wp_enqueue_script('nuxt-entry', $nuxt_prod_uri . $entry_asset['file'], [], null, true);
        if (!empty($entry_asset['imports'])) {
            foreach ($entry_asset['imports'] as $import_key) {
                $import_file = $manifest[$import_key]['file'] ?? '';
                if ($import_file) {
                    wp_enqueue_script('nuxt-import-' . md5($import_key), $nuxt_prod_uri . $import_file, ['nuxt-entry'], null, true);
                }
            }
        }
    }
}
// 挂载到WordPress资源加载钩子
add_action('wp_enqueue_scripts', 'enqueue_nuxt_assets');

两类页面的兼容方案 #

1. 原生HTML + Vue模块的混合页面 #

按上面配置暴露的Vue组件会自动注册为自定义元素，直接在WordPress的文章、页面模板、小工具里写对应标签即可渲染，和原生HTML完全不冲突：

<!-- 原生WordPress内容 -->
<div class="wp-native-content">
  <h2>原生文章标题</h2>
  <p>原生文章内容</p>
</div>
<!-- 直接插入Vue组件，支持传props -->
<comment-block post-id="<?php echo get_the_ID(); ?>"></comment-block>
<product-card product-sku="12345"></product-card>

2. 完全由Vue开发的独立页面 #

新建自定义页面模板，仅留挂载节点，内容完全由Nuxt渲染：

<?php
/* Template Name: 全Vue独立页面 */
get_header();
?>
<div id="nuxt-app-root"></div>
<?php get_footer(); ?>

在Nuxt的app.vue中按路由匹配渲染对应页面内容即可，也可以直接开启Nuxt路由，和WordPress的页面路径做对应。

可选扩展：SSR 支持 #

如果全Vue页面有SEO需求，可将Nuxt部署为Node服务，在WordPress中添加重定向规则，将指定路径的请求转发到Nuxt服务返回服务端渲染后的HTML，混合页面仍用自定义元素的客户端渲染模式即可。

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