在 wordpress 页面模板内访问 Vue 应用程序中的字体资产

编程问答 2022-05-24

问题描述

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

我正在运行一个项目，其中 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 时为资产使用不同的路径？

提前致谢！

解决方法

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

我所做的是：

  • 将字体放入我的应用程序文件夹结构中的“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 页面中访问。

icomoonvue.jswordpresswordpress-theming