Question

我打算开发集成了VueJS功能的wordpress插件。一般的想法是建立一个开发环境，在该环境中，我使用插件主文件夹中的vue-cli启动一个项目。生成css / js文件时，我可以使用插件php主文件中的wp_enqueue_scripts钩子将文件排入队列。

此方法有两个缺点：

1）由于使用插件的页面与webpack环境（webpack_dev_server）服务的页面不同，因此无法进行热重装

2）为了使静态资产（图像，字体）在生成的JavaScript中得到正确解决，我需要将插件的最终路径指定为baseUrl参数，如下所示：

//vue.config.js

module.exports = {
  baseUrl: 'wp-content/plugins/VuePress/dist/', // <<--- hardcoded path
  productionSourceMap: false,
  filenameHashing: false,
  lintOnSave: true,

  transpileDependencies: [
    /\bvue-awesome\b/
  ],

  outputDir: undefined,
  assetsDir: undefined,
  runtimeCompiler: undefined,
  parallel: undefined,
  css: undefined
}

虽然第一点很烦人但没有阻塞，但是第二点则代表了一个严重的缺点：baseUrl是“硬编码的”，这意味着如果插件在某些不在标准位置的高级wp安装中着陆，则静态资产链接将断开。

我想到了一个骇客：我可以使用假路径作为baseUrl（例如baseUrl: '__FAKEPATH__/')，并且当插件被激活时，我可以打开由webpack生成的js包，preg_replace FAKEPATH并写入修改后的内容（具有正确的路径）返回其目的地，如下所示（伪代码）：

$js = file_get_contents( __DIR__ . '/js/webpack_bundle.js' );
$js = preg_replace( "__FAKEPATH__/", __DIR__ . "/dist/", $js );
file_put_contents( __DIR__ . '/js/webpack_bundle.js', $js  );

任何解决这两个问题的好主意都将不胜感激

如何从硬编码的路径中提取vue.config.js的baseUrl参数，以正确处理静态资产

0 个答案: