问题描述
在开发 WordPress 的woocommerce电商插件时，产品页面的变体表单的加入购物车功能，原来是基于vue3+组合式api+非构建模式定制开发。客户为追求性能，尽量减少文件加载，最终决定用vue3构建模式方案，以求发布时优化代码，增强性能。
使用 Vite + Vue 构建前端功能。按照配置步骤，在插件的frontend/目录下执行npm run dev启动开发模式后，终端显示 Vite 的本地访问地址为http://localhost:5173/。但当我直接打开这个地址时，看到的并不是平时通过 WampServer 访问的 WordPress 首页（我习惯通过localhost/wordpress或类似地址打开 WordPress），而是 Vite 的默认页面。
所以问题来了，为什么 Vite 启动的地址不是我的 WordPress 站点？开发时应该如何正确访问 WordPress 页面，同时享受 Vite 的热更新功能呢？
原因分析
因为 Vite 开发服务器和 WordPress 本地服务器（WampServer）是两个独立的服务：
Vite 的 localhost:5173 是「前端资源服务器」，仅用于托管 Vue 开发中的脚本（提供热更新），本身不运行 WordPress 的 PHP 代码，所以打开后是 Vite 的默认页面，不是 WordPress 首页；
WordPress 实际运行在 WampServer 的服务器上（如 localhost/your-wordpress 或 127.0.0.1/your-wordpress），这才是你需要访问的页面。
开发模式下，Vite 不会直接生成最终的静态文件（比如 dist 目录下的文件），而是通过开发服务器实时编译代码、提供热更新（修改代码后页面自动刷新），因此 WordPress 加载的脚本必须指向这个开发服务器的地址，才能获取到最新的未构建代码 —— 这是开发阶段的 正确配置，和你通过 WAMP 访问 WordPress（比如 localhost/wordpress）是两个不同的服务（一个是 PHP 后端服务，一个是前端开发服务），二者协同工作是开发模式的正常流程。
所以应该：让 WordPress 加载 Vite 开发的 Vue 脚本
vue开发模式的核心逻辑是：通过 WampServer 访问 WordPress 页面，WordPress 再加载 Vite 开发服务器提供的 Vue 脚本，从而实现 “修改 Vue 代码 → 实时更新 WordPress 页面” 的热更新效果。
解决方案
1：配置 Vite 允许跨域
WordPress 运行在 WampServer 的域名（如 localhost/your-wordpress），Vite 开发服务器在 localhost:5173，由于两者域名不同，会触发「跨域限制」，导致 Vue 脚本无法加载。需在 frontend/vite.config.js 中添加跨域配置：
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@public': path.resolve(__dirname, 'public/src')
}
},
// 配置跨域，允许 WordPress 域名访问 Vite 资源
server: {
cors: true, // 允许跨域请求
port: 5173, // 保持 Vite 端口不变
// 可选：自动打开 WordPress 地址（替换为你的 Wamp 中 WordPress 地址）
open: 'http://localhost/your-wordpress'
},2：修改 WordPress 脚本加载逻辑（区分开发 / 生产环境）
需要让 WordPress 在 开发环境 加载 Vite 开发服务器的脚本（实现热更新），在 生产环境 加载 dist/ 目录的构建产物。
修改插件的 class-panda-skip-public.php 中的 enqueue_products_script 函数（我自己定义的文件和函数）：
public function enqueue_products_script() {
if(ENVIRONMENT==='development'){
// --------------------------
// 开发环境：加载 Vite 开发服务器的脚本
// --------------------------
$vite_server = 'http://localhost:5173'; // Vite 开发服务器地址
// 加载产品功能脚本（Vite 开发模式的入口）
wp_enqueue_script(
'panda-products-vue',
$vite_server . '/public/src/products-main.js', // Vite 开发时的脚本路径
array(),
time(), // 开发模式用时间戳避免缓存
true
);
// 传递初始化数据（开发/生产环境一致）
wp_localize_script('panda-products-vue', 'ProductVueData', array(
'products' => $this->get_available_variations(),
'nonce' => wp_create_nonce('woocommerce-add-to-cart')
));
} else {
// --------------------------
// 生产环境：加载构建后的产物（之前的逻辑不变）
// --------------------------
$manifest_path = plugin_dir_path(__FILE__) . '../frontend/dist/manifest.json';
$manifest = file_exists($manifest_path) ? json_decode(file_get_contents($manifest_path), true) : [];
// 注册 Vue 公共 chunk
if (!empty($manifest['node_modules/vue/dist/vue.runtime.esm-bundler.js'])) {
$vue_vendor_path = $manifest['node_modules/vue/dist/vue.runtime.esm-bundler.js']['file'];
wp_register_script(
'vue-vendor',
plugin_dir_url(__FILE__) . '../frontend/' . $vue_vendor_path,
array(),
'1.0.0',
true
);
}
// 注册产品功能脚本
if (!empty($manifest['public/src/products-main.js'])) {
$products_script_path = $manifest['public/src/products-main.js']['file'];
wp_enqueue_script(
'panda-products-vue',
plugin_dir_url(__FILE__) . '../frontend/' . $products_script_path,
array('vue-vendor'),
'1.0.0',
true
);
}
// 传递初始化数据
wp_localize_script('panda-products-vue', 'ProductVueData', array(
'products' => $this->get_available_variations(),
'nonce' => wp_create_nonce('woocommerce-add-to-cart')
));
}
}3：启动服务并访问 WordPress
在 frontend/ 目录执行 npm run dev，终端会显示：
VITE v4.5.0 ready in 300 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose此时 Vite 已准备好提供前端资源，前端开发服务器（localhost:5173）能监听自己的代码变化并更新「资源文件」。
由 PHP 代码生成的WordPress 页面的结构（HTML），其前端资源（如引入的 products-main.js）是通过<script> 标签远程加载自 localhost:5173（开发服务器的资源）；
比如更新 products-main.js 的内容，开发服务器会立即更新 products-main.js 的内容（确保 WordPress 页面下次加载时能拿到最新代码）；
注意：WordPress 页面需手动刷新
WordPress 页面本身不会 “主动知道” 代码已更新，必须通过手动刷新浏览器，让页面重新请求 localhost:5173 的最新 products-main.js，才能让修改后的逻辑生效。
如果想让 WordPress 页面也实现「自动刷新」，需要额外配置工具（比如 BrowserSync）来监听 WordPress 页面的变化（如 PHP 文件、模板文件）。