如何在WordPress Twenty-Twenty-Three主题中配置Vite Vue与wp_enqueue

1. 必须配置 Vite #

默认Vite项目路径与WordPress主题结构不兼容，需调整配置适配主题环境，具体修改如下：

Vite 配置文件修改 #

在主题内的example文件夹下编辑vite.config.js，调整输出路径与基础URL：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  // 对应WordPress主题内的example/dist路径
  base: '/wp-content/themes/twentytwentythree/example/dist/',
  build: {
    // 打包输出到Vite项目内的dist文件夹
    outDir: './dist',
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name].[hash].js',
        assetFileNames: 'assets/[name].[hash].[ext]'
      }
    }
  },
  server: {
    cors: true,
    port: 5173 // 避免与WordPress默认端口冲突
  }
})

• 开发环境执行npm run dev启动Vite服务器
• 生产环境执行npm run build生成静态文件到example/dist目录

2. functions.php 修改 #

确保正确引入脚本加载配置文件，并声明主题基础支持：

// 引入脚本加载逻辑文件
require_once get_template_directory() . '/enqueue-scripts.php';

// 声明主题支持HTML5解析规则
add_theme_support('html5', array('script', 'style'));

3. enqueue-scripts.php 修改 #

核心区分开发/生产环境，正确加载Vite资源：

function enqueue_vite_vue_scripts() {
  $theme_dir = get_template_directory_uri();
  $vite_dir = $theme_dir . '/example';
  $is_dev = defined('WP_ENV') && WP_ENV === 'development';

  if ($is_dev) {
    // 开发环境加载Vite Dev Server入口脚本
    wp_enqueue_script(
      'vite-vue-dev',
      'http://localhost:5173/src/main.js',
      array(),
      null,
      true
    );
    // 加载Vite热更新客户端脚本
    wp_enqueue_script(
      'vite-client',
      'http://localhost:5173/@vite/client',
      array('vite-vue-dev'),
      null,
      true
    );
  } else {
    // 生产环境读取manifest文件加载打包资源
    $manifest_path = get_template_directory() . '/example/dist/manifest.json';
    if (file_exists($manifest_path)) {
      $manifest = json_decode(file_get_contents($manifest_path), true);
      if (isset($manifest['src/main.js'])) {
        wp_enqueue_script(
          'vite-vue-prod',
          $vite_dir . '/dist/' . $manifest['src/main.js']['file'],
          array(),
          $manifest['src/main.js']['hash'],
          true
        );
        // 加载打包生成的CSS文件
        if (isset($manifest['src/main.js']['css'][0])) {
          wp_enqueue_style(
            'vite-vue-style',
            $vite_dir . '/dist/' . $manifest['src/main.js']['css'][0],
            array(),
            $manifest['src/main.js']['hash']
          );
        }
      }
    }
  }

  // 全局声明Vue配置参数
  wp_add_inline_script('vite-vue-dev', 'const __VUE_OPTIONS_API__ = true; const __VUE_PROD_DEVTOOLS__ = false;', 'before');
}
add_action('wp_enqueue_scripts', 'enqueue_vite_vue_scripts');

补充：若未设置WP_ENV常量，需在wp-config.php中添加：

define('WP_ENV', 'development'); // 生产环境改为 'production'

4. 挂载点验证 #

确认主题前端模板文件（如index.php或page.php）已添加挂载容器：

<div id="app"></div>

同时确保src/main.js中的挂载逻辑正确：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

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