一看就会，超有用活字格技能：二百一十三、bundleCSS属性在前端插件开发中的妙用

收藏

本帖最后由 Shawn.Liu 于 2024-10-30 15:27 编辑

在插件开发中，通过插件生成工具都会生成默认配置信息PluginConfig.json（PluginConfig.json - 活字格V10帮助文档 (grapecity.com.cn)），这篇帖子关注的是在实际开发中bundleCSS属性为true和false的对比。

帮助文档中的描述如下：
image.png894498290.png

如果还不太理解，相信看完下面格友的例子会增加一些印象，且听我慢慢道来......

格友需要开发一个前端插件，其中使用到了 Font Awesome （一款流行的图标字体库，用于网页设计和开发；包含了一系列矢量图标，可以轻松地通过 CSS 进行调用和使用），使用方式比较简单，大家可以参考官网或者菜鸟教程等途径了解，比如下面是一个最小的例子（使用V4版本，可选的图标包括：Font Awesome Icons ）。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
</body>
</html>

复制代码

实际在浏览器运行的效果如下，显示三组小车的图标，由此可见只需将想要的图标class引入到html代码中即可实现。
image.png15589293.png

参考菜鸟教程中的描述，引入font-awesome.css文件的方式除了上面的CDN链接的方式，还可以下载该库到本地后引用，格友正式服务器属于内网环境，所以后者是一个比较不错的方案，类似下面这样：
image.png872896423.png

以上是模拟格友的场景，本地调试效果如下，显示没有问题：
image.png451554259.png

此时发布到服务器访问应用后图标加载异常，打开网络请求，部分字体的请求报404，对应路径下找不到资源；
image.png612828063.png

那么为什么我本地调试时是正常的，发布到服务器就异常了呢，这个可能是一些格友常有的疑问？我们再去源代码下找一些看是否能找到一些线索；
image.png694250487.png

对比本地调试时的截图可以发现，插件下的目录结构不像我们在IDE或者调试时展示的那样，原因看起来是因为在使用 fa、fa-car 这类的css样式时，FontAwesome库底层需要加载一些字体资源后才可以正常展示，而现在根据 url('../fonts/fontawesome-webfont.woff2?v=4.7.0') 将无法找到原有的字体资源；

回到我们刚开始时教程中对 bundleCss 属性的描述，"发布活字格应用后是否对css属性中声明的 css 文件进行压缩打包"，那么在这个插件背景下我们不应该将Css文件进行压缩打包到 FGC_Resource 目录中，而是按照IDE的目录结构发布到服务器，以便根据相对路径在找字体资源时可以找到，我们更新一下bundleCSS属性为false，重新编译生成解决方案，替换原工程中的插件后发布到服务器；

{
"assembly": [
"FontAwesome.dll"
],
"css": [
"Resources/font-awesome-4.7.0/css/font-awesome.css"
],
"javascript": [
"Resources/FontAwesomeCellType.js"
],
"serverApiAssembly": [],
"image": "Resources/PluginLogo.png",
"description": "这是一个活字格上传插件",
"name": "上传插件",
"pluginType": "cellType",
"guid": "f295b223-969d-4c15-b437-636ed67de95c",
"version": "1.0.0.0",
"dependenceVersion": "10.0.5.0",
"bundleJavaScript": true,
"bundleCSS": false
}

复制代码

此时，发布到服务器之后图标不显示的问题就可以解决了，大家如果也偶然遇到该类的问题可以参考这种方法处理，当然bundleJavaScript也是相同的原理。

		自动登录	找回密码
密码			立即注册

[易学技巧] 一看就会，超有用活字格技能：二百一十三、bundleCSS属性在前端插件开发中的妙用

0 个回复

浏览过的版块

活字格认证

活字格高级认证