0

除非我真的找不到答案，否则我尽量不发布问题，但恐怕现在就是这种情况。

我正在运行一个项目，其中 Vue 应用程序部署在 wordpress 网站的页面中。到目前为止一切顺利，集成有点复杂，但现在是。

该应用程序嵌入了排队的脚本和样式：

 wp_enqueue_script('portal', get_stylesheet_directory_uri() . '/myapp/dist/app.js', [], false, true);

我可以通过使 wordpress 主题目录可用来解决从 javascript 访问应用程序资产的问题：

$script_data = [
  'image_path' => get_stylesheet_directory_uri() . '/myapp/dist/img/',
  'myapp' => get_stylesheet_directory_uri()
];
wp_localize_script(
  'portal',
  'wpData',
  $script_data
);

我花了一些时间才知道，所以我希望它对某人有所帮助。

我在尝试加载一些字体时被困住了。我将这些字体导入到 scss 中，如下所示：

@font-face {
 font-family: 'icomoon';
 src: url('~@/assets/fonts/icomoon.eot?ddstsa');
 src: url('~@/assets/fonts/icomoon.eot?ddstsa#iefix') format('embedded-opentype'),
   url('~@/assets/fonts/icomoon.ttf?ddstsa') format('truetype'),
   url('~@/assets/fonts/icomoon.woff?ddstsa') format('woff'),
   url('~@/assets/fonts/icomoon.svg?ddstsa#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
 font-display: block;
}

这样我的 Vue 应用程序就可以编译，没问题，如果我“独立”运行应用程序，而不是嵌入到 wordpress 页面中，它会找到字体。但是在 wp 页面中，它会在文件夹 /fonts/ 中搜索字体，但它应该转到 /wp-content/themes/mytheme/myapp/dist/fonts ...

¿在部署到 wordpress 时，如何使它使用不同的资产路径？

提前致谢！

4

1 回答 1

0

好吧，我想我找到了我的问题的答案，或者至少找到了一个对我有用的解决方法，所以我想分享它，以防有人和我一样陷入困境。

我所做的是：

  • 将字体放入我的应用程序文件夹结构中的“public/fonts”文件夹中。public 文件夹中的所有资产在构建时直接复制到 dist 文件夹。

  • 创建一个 icomoon.css 文件，也在 public/css 文件夹中导入：

@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot?txvsxz');
  src: url('../fonts/icomoon.eot?txvsxz#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?txvsxz') format('truetype'), url('../fonts/icomoon.woff?txvsxz') format('woff'), url('../fonts/icomoon.svg?txvsxz#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
  • 单机运行时查找字体：参考 index.html 中的 .css 文件。
<link rel="stylesheet" href="<%= BASE_URL %>css/icomoon.css" />
  • 从运行 wordpress 页面的实例中查找字体：在您的 functions.php 中引用 .css 文件：
wp_enqueue_style(
      'icomoon',
      get_stylesheet_directory_uri() . '/myapp/dist/css/icomoon.css',
      [],
      null
    );

因此，字体既可以独立运行，也可以从 wordpress 页面访问。

于 2021-03-05T17:18:45.233 回答