在WordPress插件中，JavaScript文件内硬编码相对路径（如./textures/cloudy.png）会导致404错误，因其基于当前页面URL解析而非插件目录；应通过wp_localize_script()将PHP端生成的绝对URL传递至JS，实现动态路径拼接。
在wordpress插件中，javascript文件内硬编码相对路径（如`./textures/cloudy.png`）会导致404错误，因其基于当前页面url解析而非插件目录；应通过`wp_localize_script()`将php端生成的绝对url传递至js，实现动态路径拼接。
WordPress 与静态 HTML 网站的关键差异在于请求上下文：浏览器解析 JS 中的相对路径（如 ./textures/cloudy.png）时，始终以当前 HTML 页面的 URL 为基准，而非 JS 文件所在位置。因此，在 /post-name/ 或根目录下访问时，浏览器会尝试加载 /post-name/textures/cloudy.png 或 /textures/cloudy.png，自然无法命中插件目录下的真实资源。
解决之道是将路径“注入”到 JavaScript 运行时环境，而非依赖静态相对路径。具体分两步：
-
在 PHP 端注册并传递插件基础 URL
在插件主文件（如die.php）中，wp_enqueue_script()后立即调用wp_localize_script()，将plugin_dir_url(__FILE__)（返回类似https://example.com/wp-content/plugins/die/的完整 URL）挂载为全局 JS 对象：wp_register_script( 'die', plugin_dir_url( __FILE__ ) . 'includes/Die.js' ); wp_enqueue_script( 'die' ); wp_localize_script( 'die', 'dievars', array( 'pluginUrl' => plugin_dir_url( __FILE__ ) ) ); -
在 JavaScript 中动态构建资源路径
修改Die.js，移除硬编码相对路径，改用注入的dievars.pluginUrl拼接：export const TEXTURES = { 'cloudy': { name: 'Transparent', source: dievars.pluginUrl + 'textures/cloudy.png' }, 'metal': { name: 'Metallic', source: dievars.pluginUrl + 'textures/metal.jpg' }, // 其他纹理... };
✅ 注意事项：
-
wp_localize_script()必须在wp_enqueue_script()之后、页面输出前执行（通常放在wp_enqueue_scripts钩子内）； -
dievars是全局对象名，需确保不与其他插件冲突（可按插件命名规范改为die_plugin_vars）； - 路径末尾无斜杠，
plugin_dir_url()返回值已含结尾/，因此直接拼接'textures/...'即可； - 若使用 ES6 模块语法（如
export），需确认 WordPress 加载方式支持（推荐搭配type="module"或构建工具）；若兼容性优先，可改用window.dievars+ IIFE 封装。
该方案彻底解耦了前端资源定位逻辑与页面路由，确保无论用户访问首页、文章页或后台，纹理图片均能从插件目录准确加载。
立即学习“Java免费学习笔记（深入）”；
