JeecgBoot

# 前端

# 执行pnpm install的时候报错

ERR_PNPM_INVALID_OVERRIDE_SELECTOR  Cannot parse the "//" selector in the overrides

翻译：在overrides里面无法解析"//"​ 这个问题在issue中能找到， 解决办法如下：

  • 删除无法解析的"//",
  • pnpm降级到6.23.6（没试，不想降级）

这是pnpm在读package.json中的配置时出现的问题,pnpm.overrides或者resolutions存在"//"，选择删掉，因为依赖源选择好了，在国内应该都有镜像

pnpm.overrides 和 yarn 提供的resolutions 作用类似：指定依赖版本覆盖所有依赖及子依赖。 (npm可以直接安装指定版本） resolutions在遇到某些子依赖高版本有bug的时候，固定所有子依赖的版本有用

package.json
"resolutions": {
   "//": "Used to install imagemin dependencies, because imagemin may not be installed in 	China. If it is abroad, you can delete it",
   "bin-wrapper": "npm:bin-wrapper-china",
   "rollup": "^2.56.3",
   "gifsicle": "5.2.0"
 },

# npm下载依赖esbuild报错的问题throw new Error

网上有很多文章解决esbuild安装问题，就是执行node node_modules/esbuild/install.js安装后，再跑就可以了。
这里我提一点，不要无脑复制粘贴，要看你的esbuild的报错路径
以下的报错路径就是另外一个依赖里面的报错

 at Object.<anonymous> (/Users/ruios/web/vue-vben-admin-main/node_modules/vite-plugin-mock/node_modules/esbuild/bin/esbuild:2:7)

根据目录找到文件夹，确实里面里面也有一个esbuild 所以执行以下

node node_modules/vite-plugin-mock/node_modules/esbuild/install.js

再次运行就ok

# vite.config.js中有一个配置optimizeDeps

该配置的目的：

  • 兼容 CommonJS 和 AMD 模块的依赖（下图中needsInterop标志为true就是要重写CommonJS的导出） 因为 Vite 的 DevServer 是基于浏览器的 Natvie ES Module 实现的，所以对于使用的依赖如果是 CommonJS 或 AMD 的模块，则需要进行模块类型的转化（ES Module）

  • 减少模块间依赖引用导致过多的请求次数,加快启动速度 预编译后会将dependencies的依赖和optimizeDeps.include中的依赖进行预编译缓存，并生成存储的路径文件node_moduels/.vite/_metadata.json

foo

为了加快二次及后续编译速度，自己写optimizeDeps比较麻烦，这里到npm上看看用起来吧：vite-plugin-optimize-persist 吧 老实讲：vite项目页面稍微多一丢丢东西，开发体验时首次加载页面真的慢。不过有了第一次，后面还是舒服

# v-deep usage as a combinator has been deprecated

vue警告代码

::v-deep usage as a combinator has been deprecated. Use :deep(&lt;inner-selector>) instead.

解决方案 使用 :deep() 替换 ::v-deep

.carousel {
  // Vue 2.0 写法
  // ::v-deep .carousel-btn.prev {
  //    left: 270px;
  //  }

  // Vue 3.0 更改为以下写法
  :deep(.carousel-btn.prev) {
    left: 270px;
  }
}

# a-timeline时间线组件未加载

JeecgVue3使用了antd相关组件，并且大部分组件都做了配置，但是没有全部配置。比如a-timeline，导致页面不会出现效果。 控台报错

Failed to resolve component: a-timeline
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

解决方案

  • 配置按需加载:src/commponents/registerGlobComp.ts
import type { App } from 'vue';
import { Icon } from './Icon';
import AIcon from '/@/components/jeecg/AIcon.vue';
//Tinymce富文本
import Editor from '/@/components/Tinymce/src/Editor.vue';

import { Button, JUploadButton } from './Button';

// 按需注册antd的组件
import {
  // Need
  Button as AntButton,
  Select,
  Alert,
  Checkbox,
  DatePicker,
  TimePicker,
  Calendar,
  Radio,
  Switch,
  Card,
  List,
  Tabs,
  Descriptions,
  Tree,
  Table,
  Divider,
  Modal,
  Drawer,
  TreeSelect,
  Dropdown,
  Tag,
  Tooltip,
  Badge,
  Popover,
  Upload,
  Transfer,
  Steps,
  PageHeader,
  Result,
  Empty,
  Avatar,
  Menu,
  Breadcrumb,
  Form,
  Input,
  Row,
  Col,
  Spin,
  Space,
  Layout,
  Collapse,
  Slider,
  InputNumber,
  Carousel,
  Popconfirm,
  Skeleton,
  Cascader,
  Rate,
  //在这个进行所需组件的配置！！！
  Timeline,
} from 'ant-design-vue';
const compList = [AntButton.Group, Icon, AIcon, JUploadButton];

//敲敲云—仪表盘设计器（拖拽设计）
import DragEngine from '@qiaoqiaoyun/drag-free';
import('@qiaoqiaoyun/drag-free/lib/index.css');
console.log('---初始化---， 全局注册仪表盘--------------');

export function registerGlobComp(app: App) {
  compList.forEach((comp) => {
    app.component(comp.name || comp.displayName, comp);
  });
  //仪表盘依赖Tinymce，需要提前加载（没办法按需加载了）
  app.component(Editor.name, Editor);

  app
    .use(Select)
    .use(Alert)
    .use(Button)
    .use(Breadcrumb)
    .use(Checkbox)
    .use(DatePicker)
    .use(TimePicker)
    .use(Calendar)
    .use(Radio)
    .use(Switch)
    .use(Card)
    .use(List)
    .use(Descriptions)
    .use(Tree)
    .use(TreeSelect)
    .use(Table)
    .use(Divider)
    .use(Modal)
    .use(Drawer)
    .use(Dropdown)
    .use(Tag)
    .use(Tooltip)
    .use(Badge)
    .use(Popover)
    .use(Upload)
    .use(Transfer)
    .use(Steps)
    .use(PageHeader)
    .use(Result)
    .use(Empty)
    .use(Avatar)
    .use(Menu)
    .use(Tabs)
    .use(Form)
    .use(Input)
    .use(Row)
    .use(Col)
    .use(Spin)
    .use(Space)
    .use(Layout)
    .use(Collapse)
    .use(Slider)
    .use(InputNumber)
    .use(Carousel)
    .use(Popconfirm)
    .use(DragEngine)
    .use(Skeleton)
    .use(Cascader)
    .use(Rate)
    //在这个进行所需组件的配置！！！！
    .use(Timeline);
  console.log("注册antd组件完成！");
}

上面代码中，注释部分添加了Timeline配置， 如果是其他缺失的组件也是类似处理。如果就可以正常运行了！！！

← 后端 →