wp-scripts未正常加载JS/CSS，WordPress插件问题排查

核心错误：用本地文件路径而非URL注册资源 #

你当前用plugin_dir_path()获取的是服务器本地文件系统路径（比如/var/www/html/wp-content/plugins/your-plugin/build/），但浏览器需要的是可访问的HTTP URL。这就是JS明明存在却加载失败的根本原因——浏览器在请求一个本地文件路径，而非网站的URL资源。

修复路径问题 #

替换路径定义为URL路径：

// 替换原有的路径定义
define('APV_PLUGIN_URL', plugin_dir_url(__FILE__));
define('BUILD_URL', APV_PLUGIN_URL . 'build/');

// 然后修改注册函数：
function enqueue_scripts() {
  wp_register_script('area-public-visualizer-script', BUILD_URL . 'index.js', array(), false, true);
  wp_enqueue_script('area-public-visualizer-script');
}

function enqueue_styles() {
  wp_register_style('area-public-visualizer-style', BUILD_URL . 'index.css', array(), false);
  wp_enqueue_style('area-public-visualizer-style');
}

• plugin_dir_url()会返回插件目录的HTTP URL（比如https://your-site.com/wp-content/plugins/your-plugin/），这是浏览器能识别的路径。
• 建议在注册时添加版本号和加载位置参数（最后两个参数），避免缓存问题。

CSS文件未生成的问题 #

你提到CSS是通过index.scss导入到src/index.js中，之前能生成index.css，现在失效，可能是以下原因：

1. wp-scripts版本更新导致的输出变化 #

wp-scripts在新版本中，开发模式（wp-scripts start）默认会把CSS嵌入到JS中，而非生成独立的CSS文件；只有生产模式（wp-scripts build）才会提取独立CSS文件。如果你的开发环境用start命令，浏览器中不会请求index.css，而是由JS动态注入样式。

2. 检查是否正确导入SCSS #

确保src/index.js中正确导入了SCSS文件：

// src/index.js 顶部
import './index.scss';

如果导入路径错误，wp-scripts不会处理样式。

3. 强制开发模式生成独立CSS文件（可选） #

如果你需要在开发模式下也生成独立CSS文件，可以修改package.json的start命令，添加--output-style参数：

"scripts": {
    "build": "wp-scripts build src/index.js",
    "start": "wp-scripts start src/index.js --output-style=expanded"
}

其他可能的问题 #

• 缓存问题：浏览器缓存了旧的资源路径，或者WordPress的静态资源缓存。可以在注册资源时添加动态版本号（比如文件修改时间）：

  $js_version = filemtime(APV_PLUGIN_DIR . 'build/index.js');
  wp_register_script('area-public-visualizer-script', BUILD_URL . 'index.js', array(), $js_version, true);
  

• 文件权限问题：检查build目录及其文件的权限，确保Web服务器能读取这些文件（通常设置为755目录，644文件）。
• wp-scripts依赖问题：删除node_modules和package-lock.json，重新运行npm install，确保依赖安装完整。

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