本文详解如何将Vite（现代前端构建工具）集成到WordPress主题开发中。

为什么用Vite而非Webpack

工具 冷启动 热更新(HMR) 配置复杂度
Webpack 慢（10s+） 一般 高（webpack.config.js复杂）
Parcel 中 好 低
Vite 极快（<1s） 毫秒级 极低（零配置启动）

初始化WordPress + Vite项目

目录结构

my-theme/
├── style.css          # WordPress主题信息头
├── index.php
├── functions.php
├── package.json
├── vite.config.js    # Vite配置
├── src/
│   ├── main.js       # JS入口
│   ├── style.scss    # SCSS入口
│   └── components/   # Vue/React组件（可选）
└── dist/             # Vite构建输出（gitignore）

安装Vite

cd wp-content/themes/my-theme
npm init -y
npm install --save-dev vite @vitejs/plugin-vue  # 如果用Vue
# 或
npm install --save-dev vite @vitejs/plugin-react  # 如果用React

配置vite.config.js

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';  // Vue支持
// import react from '@vitejs/plugin-react';  // React支持

export default defineConfig({
  plugins: [vue()],  // 或 react()
  root: process.cwd(),
  base: '/wp-content/themes/my-theme/dist/',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    manifest: true,  // 生成manifest.json（重要！）
  },
  server: {
    proxy: {
      // 开发时代理WordPress API请求
      '/wp-json': {
        target: 'https://www.shenma98.com',
        changeOrigin: true,
      },
    },
  },
});

在WordPress中加载Vite资源

关键：读取manifest.json

Vite构建后会生成 dist/manifest.json：

{
  "src/main.js": {
    "file": "assets/main.hash.js",
    "css": ["assets/main.hash.css"]
  }
}

functions.php中动态加载

// functions.php
function enqueue_vite_assets() {
    $manifest_path = get_template_directory() . '/dist/manifest.json';

    if (file_exists($manifest_path) && WP_DEBUG) {
        // 开发模式：加载Vite开发服务器
        wp_enqueue_script(
            'vite-client',
            'http://localhost:5173/wp-content/themes/my-theme/src/main.js',
            [],
            null,
            true
        );
    } else {
        // 生产模式：读取manifest.json
        $manifest = json_decode(
            file_get_contents($manifest_path),
            true
        );

        $js_file  = $manifest['src/main.js']['file'];
        $css_files = $manifest['src/main.js']['css'] ?? [];

        // 加载CSS
        foreach ($css_files as $index => $css_file) {
            wp_enqueue_style(
                "theme-style-{$index}",
                get_template_directory_uri() . "/dist/{$css_file}",
                [],
                null
            );
        }

        // 加载JS
        wp_enqueue_script(
            'theme-script',
            get_template_directory_uri() . "/dist/{$js_file}",
            [],
            null,
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'enqueue_vite_assets');

开发模式：启用Vite热更新

package.json脚本

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

启动开发服务器

# 终端1：启动Vite dev server
npm run dev
# 输出：  Local: http://localhost:5173/

# 终端2：启动WordPress（例如用wp-env）
npm run wp-env start

在主题中注入HMR客户端

// functions.php
function inject_vite_hmr() {
    if (WP_DEBUG) {
        echo '<script type="module" src="http://localhost:5173/wp-content/themes/my-theme/src/main.js"></script>';
    }
}
add_action('wp_head', 'inject_vite_hmr');

在Vite中使用WordPress REST API

示例：Vue组件获取文章列表

<!-- src/components/PostList.vue -->
<template>
  <div>
    <h1>最新文章</h1>
    <div v-for="post in posts" :key="post.id">
      <h2>{{ post.title.rendered }}</h2>
      <div v-html="post.excerpt.rendered"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const posts = ref([]);

onMounted(async () => {
  const res = await fetch('/wp-json/wp/v2/posts?per_page=5');
  posts.value = await res.json();
});
</script>

在主入口加载Vue应用

// src/main.js
import { createApp } from 'vue';
import PostList from './components/PostList.vue';

const app = createApp({});
app.component('post-list', PostList);
app.mount('#app');

<!-- page.php -->
get_header();
?>
<div id="app">
  <post-list></post-list>
</div>
<?php
get_footer();

使用SCSS + Vite

安装SCSS支持

npm install --save-dev sass

在src/style.scss中编写样式

// src/style.scss
@import 'variables';
@import 'mixins';
@import 'global';

自动注入到WordPress

// src/main.js
import './style.scss';  // Vite自动处理SCSS→CSS

优化生产构建

分割代码（Code Splitting）

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue'],       // Vue单独打包
          'ui-vendor': ['axios'],       // 请求库单独打包
        },
      },
    },
  },
});

压缩与Tree-shaking

// vite.config.js
export default defineConfig({
  build: {
    minify: 'terser',  // 或 'esbuild'（更快）
    terserOptions: {
      compress: {
        drop_console: true,  // 生产环境移除console.log
      },
    },
  },
});

2026年Vite + WordPress趋势

趋势一：Islands Architecture（岛屿架构）

<!-- 只在需要的地方加载JS -->
<Island>
  <PostList />  <!-- 交互组件 -->
</Island>

<StaticContent />  <!-- 静态内容，零JS -->

趋势二：Vite 5+（Rolldown）

Vite 5（2025年底）：
- 使用Rolldown替代Rollup（速度提升10x）
- 冷启动 < 100ms
- 构建速度提升3x

趋势三：VitePress（文档主题）

VitePress = Vite + VuePress
→ 可以用来做WordPress文档主题
→ 比传统PHP主题快10x

实战：完整主题示例

目录结构

my-vite-theme/
├── style.css       # WordPress主题头
├── index.php
├── functions.php
├── package.json
├── vite.config.js
├── src/
│   ├── main.js
│   ├── style.scss
│   └── components/
│       ├── Header.vue
│       ├── Footer.vue
│       └── PostCard.vue
└── dist/           # gitignore

构建与部署

# 1. 构建生产版本
npm run build

# 2. 提交到Git（排除dist/）
echo "dist/" >> .gitignore
git add .
git commit -m "Add Vite-powered WordPress theme"
git push

# 3. 在服务器上拉取代码
ssh user@server
cd /var/www/html/wp-content/themes/my-vite-theme
git pull

决策建议

  • 新主题开发 → Vite + Vue/React（现代工具链）
  • 旧主题维护 → 逐步迁移（先迁移JS，再迁移CSS）
  • 高性能要求 → Vite构建 + 代码分割
  • 快速原型 → Vite + Tailwind CSS（ utility-first）

总结

Vite让WordPress主题开发进入现代前端时代。热更新、快速构建、Tree-shaking，这些特性让开发体验提升10倍。

立即行动：在你的下一个WordPress主题项目中，尝试用Vite替代传统的wp_enqueue_script手动管理依赖。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。