乐趣区

关于jeecg-boot:网友心得运行jeecgbootvue3项目可能出现的问题

jiezi

运行 jeecgboot-vue3 我的项目可能呈现的问题

1. 执行 pnpm install 的时候报错

ERR_PNPM_INVALID_OVERRIDE_SELECTOR  Cannot parse the “//” selector in the overrides

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

-1. 删除无奈解析的 ”//”,
-2. 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"
 },

3. pnpm 益处：

  1. 全局装置，专用依赖，同名包同版本只会下载一次，晋升速度
  2. 我的项目中只会展现一级依赖，不会引入你不晓得的子级依赖（npm 将依赖拍平以缩小反复包的下载）

4. 对于 npm 下载依赖 esbuild 报错的问题 throw new Error(`esbuild: Failed to install correctly

网上有很多文章解决 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 了

5. 提醒 build.terserOptions is specified but build.minify is not set to use Terser. Note Vite now defaults to use esbuild for minification. If you still prefer Terser, set build.minify to “terser”.

  1. 在 vite.config.js 中有打包配置 terserOptions 为了去掉 console，从提醒能够看进去，当初 Vite 默认应用 esbuild 去作为代码压缩器，如果想要应用 terserOptions 这些配置，要减少 minify：terser。
    看文档默认 esbuild 压缩有劣势，那也能够删掉 terserOptions

    1. minify: 编译优化伎俩，指在不影响代码语义的状况下，尽可能的减小程序的体积， 常见的 minify 工具如 terser、uglify，swc 和 esbuid 也自带 minify 性能 。
    2. 发现并不失效，起初查问是 minify 配置 esbuild 的问题，配置成 terser 混同器就能够了， 网上对于 minify 的默认值有不统一的说法，官网的默认值是 esbuild，而通过理论验证，它的默认值应该是 terser

  2. 相干参数：

           1. compress：（默认 `{}`）- 通过 `false` 以齐全跳过压缩。传递一个对象以指定自定义 [ 压缩选项](https://terser.org/docs/api-reference#compress-options)。2. compress.keep_infinity：（默认值：`false`）- 通过 `true` 以避免 `Infinity` 被压缩为 `1/0`，这可能会导致 Chrome 呈现性能问题。3. compress.drop_console：（默认值：`false`）- 传递 `true` 以放弃对 `console.*` 函数的调用。如果您心愿在删除函数调用后删除特定的函数调用，例如 `console.info` 和 / 或保留函数自变量的副作用，请 `pure_funcs` 改用。

批改前代码：

vite.config.js
  build: {
      target: 'es2015',
      outDir: OUTPUT_DIR,
      terserOptions: {
        compress: {
          keep_infinity: true,
          // Used to delete console in production environment
          drop_console: VITE_DROP_CONSOLE,
        },
      },
      // Turning off brotliSize display can slightly reduce packaging time
      brotliSize: false,
      chunkSizeWarningLimit: 2000,
    },

批改后代码：

    build: {
      minify: 'terser',
      // 进行压缩计算
      brotliSize: false,
      target: 'es2015',
      //【VUEN-872】css 编译兼容低版本 chrome 内核（例如 360 浏览器）cssTarget: 'chrome80',
      outDir: OUTPUT_DIR,
      terserOptions: {
        compress: {
          keep_infinity: true,
          // Used to delete console in production environment
          // 打包主动删除 console
          drop_console: VITE_DROP_CONSOLE,
          drop_debugger: true,
        },
      },
      // Turning off brotliSize display can slightly reduce packaging time
      chunkSizeWarningLimit: 2000,
    },

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

该配置的目标：

  1. 兼容 CommonJS 和 AMD 模块的依赖（下图中 needsInterop 标记为 true 就是要重写 CommonJS 的导出）
    因为 Vite 的 DevServer 是基于浏览器的 Natvie ES Module 实现的，所以对于应用的依赖如果是 CommonJS 或 AMD 的模块，则须要进行模块类型的转化（ES Module）
  2. 缩小模块间依赖援用导致过多的申请次数, 放慢启动速度
    预编译后会将 dependencies 的依赖和 optimizeDeps.include 中的依赖进行预编译缓存，并生成存储的门路文件 node_moduels/.vite/_metadata.json

为了放慢二次及后续编译速度，本人写 optimizeDeps 比拟麻烦，这里到 npm 上看看用起来吧：vite-plugin-optimize-persist 吧

诚实讲：vite 我的项目页面略微多一丢丢货色，开发体验时首次加载页面真的慢。不过有了第一次，前面还是难受

7. vite（esbuild + rollup）

对于 esbuild 的优良，网上有很多构建劣势比照图，甩 webpack 一条街。

Vite 用 esbuild 代替 Rollup 进行预打包，速度也十分快，下面的第三点能够看到生产能够用 esbuild 作为压缩器。生产打包还是用的 Rollup，esbuild 目前对生产包反对不够强壮，很多配置无奈通过 esbuild 实现

8. 运行正告提醒 WARN [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

Vue 正告代码 

::v-deep usage as a combinator has been deprecated. Use :deep(<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;}
}
退出移动版