[英]Access to font assets in Vue app inside a wordpress page template
I try not to post a question unless I really can't find an answer, but I am afraid that is the case now.除非我真的找不到答案,否则我尽量不发布问题,但恐怕现在就是这种情况。
I am running a project where a Vue app is deployed within a page of a wordpress site.我正在运行一个项目,其中 Vue 应用程序部署在 wordpress 站点的页面中。 So far so good, integration has been somewhat complicated but it is now.
到目前为止一切顺利,集成有点复杂,但现在是。
The app is embedded with enqueued script and styles:该应用程序嵌入了排队脚本和 styles:
wp_enqueue_script('portal', get_stylesheet_directory_uri() . '/myapp/dist/app.js', [], false, true);
I can solve the access to the app assets from javascript by making the wordpress theme directory available:我可以通过使 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
);
That took me some time to find out, so I hope it helps someone.我花了一些时间才知道,所以我希望它对某人有所帮助。
I am stuck though at trying to load some fonts.我在尝试加载一些 fonts 时被卡住了。 I have those fonts imported to the scss like this:
我将那些 fonts 导入到 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;
}
That way it my Vue app compiles, no problem, and if I run the app "stand-alone", not embedded in the wordpress page, it would find the fonts.这样我的 Vue 应用程序就可以编译,没问题,如果我“独立”运行应用程序,而不是嵌入 wordpress 页面,它会找到 fonts。 However within the wp page, it searches for the fonts in the folder /fonts/ but it should instead go to /wp-content/themes/mytheme/myapp/dist/fonts...
但是在 wp 页面中,它在文件夹 /fonts/ 中搜索 fonts 但它应该改为 go 到 /wp-content/themes/mytheme/myapp/dist/fonts...
¿How can I make it use a different path for assets when deployed into wordpress? ¿ 在部署到 wordpress 时,如何使其对资产使用不同的路径?
Thanks in advance!提前致谢!
Well, I think I found an answer to my question or at least a workaround that worked for me so I thought of sharing it in case someone gets stuck at the same step as I did.好吧,我想我找到了我的问题的答案,或者至少找到了一个对我有用的解决方法,所以我想分享它,以防有人和我一样陷入困境。
What I did was to:我所做的是:
Put the fonts into the 'public/fonts' folder in my app folder structure.将 fonts 放入我的应用程序文件夹结构中的“public/fonts”文件夹中。 All assets within public folder are directly copied to the dist folder on build.
public 文件夹中的所有资产在构建时直接复制到 dist 文件夹。
Create a icomoon.css file, also in public/css folder with the imports:创建一个 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;
}
<link rel="stylesheet" href="<%= BASE_URL %>css/icomoon.css" />
wp_enqueue_style(
'icomoon',
get_stylesheet_directory_uri() . '/myapp/dist/css/icomoon.css',
[],
null
);
So that way font can be accessed both running in stand alone and from the wordpress page.因此,字体既可以独立运行,也可以从 wordpress 页面访问。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.