如何在WordPress主题中运行Vite+Vue前端项目？

可行性结论 #

完全可以在WordPress主题中运行Vue默认前端，只需调整路径配置、添加挂载容器并修正脚本入队逻辑即可。

现有代码的错误修正 #

你的入队脚本存在路径拼接错误：get_template_directory_uri()已经返回主题的完整URL前缀，再拼接完整HTTP地址会导致资源路径无效，正确写法如下：

<?php
function enqueue_vue_assets() {
    // 脚本路径：主题目录下的dist/assets/xxx.js
    $js_path = get_template_directory_uri() . '/dist/assets/index-ec461b82.js';
    // 样式路径：主题目录下的dist/assets/xxx.css
    $css_path = get_template_directory_uri() . '/dist/assets/index-fc5f319f.css';
    
    // 用文件修改时间作为版本号，避免缓存问题
    $js_version = filemtime(get_template_directory() . '/dist/assets/index-ec461b82.js');
    $css_version = filemtime(get_template_directory() . '/dist/assets/index-fc5f319f.css');

    wp_enqueue_script('vue-app', $js_path, array(), $js_version, true);
    wp_enqueue_style('vue-app', $css_path, array(), $css_version);
}
add_action('wp_enqueue_scripts', 'enqueue_vue_assets');
?>

必须添加的内容 #

1. Vue挂载容器：在WordPress模板文件（比如自定义页面模板page-vue.php、header.php或footer.php的合适位置）添加挂载节点：

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

注意节点要放在Vue脚本加载前的位置（因你设置了脚本在footer加载，放在footer之前即可）。

2. Vite配置文件：在主题根目录创建vite.config.js，配置正确的打包基础路径，避免资源路径错误：

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

export default defineConfig({
  plugins: [vue()],
  // 配置base为主题下dist文件夹的路径
  base: '/wp-content/themes/example/dist/',
  build: {
    // 指定打包输出目录为主题下的dist文件夹
    outDir: './dist',
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        // 自定义静态资源文件名，方便入队引用
        entryFileNames: 'assets/index-[hash].js',
        chunkFileNames: 'assets/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]'
      }
    }
  }
})

需要移除/调整的内容 #

• 移除入队脚本中错误的完整URL拼接，改用主题路径前缀拼接相对路径。
• 如果主题中有和Vue冲突的全局JS（比如jQuery的$冲突），可在Vue中配置兼容：

// main.js中添加
const app = createApp(App)
app.config.globalProperties.$ = jQuery // 若不需要jQuery也可直接移除相关入队

• 无需移除主题原有内容（若为子主题），只需确保Vue挂载容器不影响原有布局。

开发与打包流程 #

1. 开发阶段：运行npm run dev，通过Vite代理访问WordPress地址实现热更新，在vite.config.js中添加代理配置：

server: {
  proxy: {
    '/': {
      target: 'http://wordpress2.v3dev.komodefi.com',
      changeOrigin: true
    }
  }
}

访问Vite开发服务器地址（如http://localhost:5173）即可实时预览Vue应用。
2. 上线阶段：运行npm run build，将打包后的dist文件夹放到主题目录下，确保入队脚本中的文件名与打包后一致。

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