官网 JECLoud 前端打包部署
node版本不能过高!选择node v14.17.5 版本
在部署前 如果当前node版本过高可以使用 nvm工具 切换到低版本,
但是需要注意的是 切换版本时 尽量使用默认路径安装nvm 否则可能会导致 全局安装依赖出现 xxx 不是内部命令的
的情况
nvm 安装出现环境问题可以参考 nvm 环境问题
在系统属性 环境变量 Path 里添加 %NVM_SYMLINK%\node_global
项
只要nvm 是默认安装路径 和 %NVM_SYMLINK% 指向的路径一致就可以了!
如果已经全局安装了 yalc 和lerna pnpm 那些全局依赖 使用nvm 切换到低版本node 后需要重新安装!
npm install yalc lerna -g
npm run setup
npm run yalc:publish
jecloud-core-xxx
所有使用的微应用项目,依次按照以下命令,进行打包部署
npm run setup
npm run build
可能是@jecloud/ui 依赖包版本 最终发现libs模块的版本与admin模块不一致 libs 使用yalc:publish 发布的是低版本 而admin是高版本的 依赖样式包不一致!
使用同一版本的模块
1、git pull master 分支所有最新的项目
2、npm run clean 清除依赖 node_modules
3、npm install yalc lerna -g 重新安装全局依赖
4、npm run setup
5、npm run dev
最后发布的时候 执行npm run yalc:publish
点击错误位置 查看源码 发现
import { isString, isFunction, isPromise, isArray, NOOP, getGlobalThis, extend, EMPTY_OBJ, toHandlerKey, looseToNumber, hyphenate, camelize, isObject, isOn, hasOwn, isModelListener, toNumber, hasChanged, remove, isSet, isMap, isPlainObject, invokeArrayFns, isRegExp, isBuiltInDirective, capitalize, isGloballyWhitelisted, def, isReservedProp, EMPTY_ARR, toRawType, makeMap, NO, normalizeClass, normalizeStyle } from '@vue/shared';
@vue/shared 没有 isFunciton 函数
尝试 安装最新的包版本
npm install @vue/shared@latest
发现问题依然存在
最后 复制别的项目的框架来使用!文档的安装方式 里面的代码有问题!
import 引入图片时 图片不存在 复制图片到指定路径 时 需要重新运行 npm run dev 否则还是报404 图片不存在
如果 通过
npm install ant-design-vue@3.22.0
安装 蚂蚁ui的话 会出现与jecloud的依赖冲突问题。
本来希望通过 vite 来动态自动加载依赖
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
import VueSetupExtend from 'vite-plugin-vue-setup-extend';
// plugins: plugins,
plugins: [
...plugins,
Components({
resolvers: [AntDesignVueResolver()],
dts: true,
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
}),
VueSetupExtend(),
],
但是实现不了 冲突了! dev 模式下确实动态引入了 但是载入到到项目中 而且vite打包正常 丢到微服务就报错了
// TODO: 按需引入ant-design-vue
import Antd from 'ant-design-vue';
import { createApp } from 'vue'
import App from './App.vue'
import MyPlugin from './plugins/MyPlugin'
const app = createApp(App)
app.use(MyPlugin)
app.mount('#app')
上面是在 Vue 3 中的 main.js 文件中注册插件的代码示例。其中,我们首先导入了 createApp
方法和 App.vue
组件,然后导入了我们自定义的插件 MyPlugin
。接着,我们调用 createApp
方法创建一个 Vue 实例,并使用 app.use
方法注册我们的插件。最后,我们调用 app.mount
方法将 Vue 实例挂载到页面上。
在 MyPlugin
插件中,我们可以为 Vue 实例添加全局方法、指令、过滤器等。例如,我们可以在 MyPlugin
中添加一个全局方法:
const MyPlugin = {
install(app) {
app.config.globalProperties.$myMethod = function() {
console.log('This is my method.')
}
}
}
export default MyPlugin
上面的代码中,我们为 Vue 实例添加了一个全局方法 $myMethod
,当我们在组件中调用 $myMethod
方法时,就会在控制台输出 "This is my method."
。
总之,在 Vue 3 中注册插件非常简单,只需要调用 app.use
方法即可。
import micro from '@micro';
import ui, { ConfigProvider } from '@jecloud/ui';
import func from '@jecloud/func';
import plugin from '@jecloud/plugin';
micro.setup({
app: App,
callback: (vue) => {
// const app = createApp(App);
// // 将echarts挂载到全局
vue.config.globalProperties.$echarts = echarts;
// vue 实例,可以进行相关业务操作
vue.use(ui).use(func).use(plugin);
注册自定义插件
//vue.use(Antd);
//vue.use(vueBus);
//vue.use($http);
// 配置UI库,如果不需要功能,可以不引入
ConfigProvider.setup({ publicPath: CLI_ENVS.PUBLIC_PATH, func });
// 功能组件绑定JE,用于事件操作
func.ConfigProvider.setup({ JE: useJE() });
plugin.ConfigProvider.setup({ JE: useJE() });
},
});
// 导出微应用钩子函数
export const { bootstrap, mount, unmount } = micro.useHooks();
因为 jecloud当前的ant-design-vue 为v2版本 而v2版本的 a-form-model组件已经弃用 应改回 a-form组件
<a-range-picker :value="[startTime,endTime]" @change="onTimeChange" />
startTime = ref('2023-1-1');
endTime= ref('2023-12-30');
应改为date 格式
<a-range-picker v-model:value="rangeValue" @change="onTimeChange" />
rangeValue.ref();
rangeValue.value = [dayjs(startTime.value), dayjs(endTime.value)]
//需要使用dayjs函数将日期字符串“2023-1-1”转换为一个Day.js对象
//const date = dayjs('2023-1-1');
//console.log(date); // 输出:Dayjs {_isAMomentObject: true, _isUTC: false, _pf: {…}, _locale: Locale, _d: Sat Jan 01 2023 00:00:00 GMT+0800 (中国标准时间), …}
a-range-picker 使用 getPopupContainer={triggerNode => triggerNode.parentNode}
getCalendarContainer属性的,默认为 body 上新建 div,可能不需要设置这个属性。
<a-range-picker
:getPopupContainer="(triggerNode) => triggerNode.parentNode"
:value="[dayjs(startTime), dayjs(endTime)]"
@change="onTimeChange"
/>
文件 ecloud-pc-admin 及 jecloud-pc-borders
if (!button.noReadOnly) {
button.hidden = readonly || button.metaData.hidden;
}
npm run yalc:remove && npm run yalc:jecloud //如果已经 npm i 可以用这条
npm run yalc:remove && npm run yalc:jecloud && npm i
文件 jecloud-pc-admin
目录 build/license/jecloud.license.js
function loadLicense() {
if (!licenseInfo?.LICENSE) {
const message = '加载jecloud.license证书失败!';
// alert(message);
return Promise.reject(message);
} else {
return Promise.resolve(licenseInfo);
}
}
注释掉,重新打包jecloud-pc-admin
注意package-lock.json 文件 可能会安装依赖失败 可以复制最原始的jecloud的package-lock.json 文件拷贝一份备用
易创云pc加上这个, 应该就可以正常写css代码了
打包出来图片路径应该就没问题