本帖最后由 yangchunrong 于 2020-9-21 14:54 编辑
事务中心额外卡片使用新的加载方式，配置如下 1、dumi_jqzy分支为参考dumi做出来的酒泉职业额外卡片实例，可从该分支复制新的项目地分支修改，打开该分支，可以看到以下页面：
这里是前端展示总入口，可以在这里配置需要的卡片，直接使用原本的配置就行
2、组件的代码写在src文件下： 所有的组件都放在hom/index.js页面进行展示
3、卡片写完后，把需要导出的组件写在src/index.js中（home/index.js必须导出）：
4、卡片中使用到的组件，需要在package文件中配置（常用的组件包已配置，如果没有新组件，可以不改）：
5、配置完成后，使用npm run build命令打包，在dist文件中可得到以下文件：
6、将dist文件夹中的文件全部复制（如果文件夹中有图片或其他文件也要一起复制），在服务器上建个文件夹放起来，如/opt/swzx/extraCard： 放了统一方便查看，事务中心前端的文件建议放在和我同样的文件夹下
7、去potainer平台做挂载： 在swam找到服务器点进详情：
如果没有label的话自己加一个
配置挂载：
在引入额外卡片的项目也需要修改（事务中心4.0前端已修改，不需要再改） 1、总入口文件（如事务中心index.js）进行如下修改：
代码中的两个函数为： /**
* 创建script标签加载js
* @param {string} [url='']
* @returns
*/
export const createScript = (url = '') => {
let scriptTags = window.document.querySelectorAll('script');
let len = scriptTags.length;
let i = 0;
// 截取字符串,去掉可能url是相对路径的
url = url.indexOf('.') === 0 ? url.substr(1) : url;
let _url = location.origin + url;
return new Promise((resolve, reject) => {
var isHas = false;
for (i = 0; i < len; i++) {
var src = scriptTags.src;
if (src && src === _url) {
isHas = true;
resolve();
// scriptTags.parentElement.removeChild(scriptTags);
}
}
if (!isHas) {
let node = document.createElement('script');
node.type = 'text/javascript';
node.src = url;
node.onload = resolve;
document.body.appendChild(node);
}
});
};
/**
*
* 创建link标签加载css
* @export
* @param {*} cssURL
* @param {*} charset
* @param {*} media
* @returns
*/
export function createLink(cssURL, charset, media) {
console.log("创建link");
var linkFirst = document.getElementsByTagName('link')[0],
linkTag = null;
console.log("创建link1",linkFirst);
if (!cssURL) {
return false;
}
console.log("创建link2");
linkTag = document.createElement('link');
linkTag.setAttribute('rel', 'stylesheet');
linkTag.setAttribute('charset', charset || 'utf-8');
linkTag.setAttribute('media', media || 'all');
linkTag.setAttribute('type', 'text/css');
linkTag.href = cssURL;
console.log("创建link3",linkTag);
linkFirst.after(linkTag); //在第一个link的后面追加
}
2、在项目中加入额外卡片使用的依赖包的js文件：
3、package引入包： "html-webpack-tags-plugin": "^2.0.17"
4、配置webpage：
5、加载完成后可直接使用window.ExtraCard获取组件库
第一次配置好后以后更新就不用配置了，直接把修改后的文件打包好，拖进服务器对应文件夹即可，前端不需要更新或重启
| 
发表于 2020-8-11 16:23:33