如何解决具有postTransformPublicPath的文件加载器
我在加载带有动态公共路径的字体时遇到问题,该字体在运行时替换为cdn。所以我有这样的东西:
vue.config.js文件
chainWebpack: config => {
config.module
.rule('fonts')
.use('file-loader')
.loader('file-loader')
.options({
emitFile: true,name: '[name].[hash].[ext]',outputPath: 'staticV2/fonts/',publicPath: process.env.NODE_ENV === "production" ? "./#CDN#" : "/",postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`
});
}
main.js(入口点)文件
__webpack_public_path__ = window.cdnHost; // this is set at load time by the server side rendered index.html and works for all other resources like js,svg,png,etc except fonts
font-face.scss
@font-face {
font-family: 'Noto Sans Regular';
src: local('Noto Sans Regular'),local('NotoSans-Regular'),url(~@/design/assets/fonts/NotoSans-Regular.woff2) format('woff2'),url(~@/design/assets/fonts/NotoSans-Regular.woff) format('woff');
font-display: swap;
}
font-face.css已加载到App.vue文件(根组件)中
由于我将publicPath设置为“ /”,因此在开发模式下一切正常,但是在以生产模式构建时,对字体的调用类似于:http://localhost/#CDN#/NotoSans-Regular.36747d3d16c9a73c831cb804fb8b1fab.woff2
,您可以看到#CDN#占位符不会像文件加载器文档所建议的那样被替换。
谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。