docs: added Vitepress packaging to FAQ section (#2776)

* fix: add solutions to common problems * fix: revise inspection comments * fix: revise inspection comments * fix: revise inspection comments
opentiny · Jan 11, 2025 · e1de0b3 · e1de0b3
1 parent a5ae968
commit e1de0b3
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/examples/sites/demos/pc/webdoc/faq-en.md b/examples/sites/demos/pc/webdoc/faq-en.md
@@ -2,10 +2,10 @@
 
 ## 1, Popup element misaligned and flipped in wujie micro front-end
 
-_Reason:_ The popup element has a boundary detection logic, and in sub applications, the width and height of 'window' may be much smaller than that of the viewport,
+**Reason:** The popup element has a boundary detection logic, and in sub applications, the width and height of 'window' may be much smaller than that of the viewport,
 therefore, it can misjudge boundaries, leading to issues such as flipping and misalignment.
 
-_Solution:_ Introducing popup global configuration, assigning the 'window' of the main application to the 'viewportWindow' of the global configuration for boundary judgment
+**Solution:** Introducing 'popup global' configuration, assigning the 'window' of the main application to the 'viewportWindow' of the global configuration for boundary judgment
 
 ```js
 import globalConfig from '@opentiny/vue-renderless/common/global'
@@ -16,3 +16,20 @@ if (window.__POWERED_BY_WUJIE__) {
   globalConfig.viewportWindow = window.parent
 }
 ```
+
+## 2、In the 'Vitepress' project, reference the 'Opentiny' component package and use the 'Vitepress' packaging command: 'pnpm docs:build' ， Causing error: 'ERR_UNSUPPORTED_DIR_IMPORT'
+
+**Reason:** Unable to find the 'js/css/...' files referenced within the component package waiting for suffix path, error statement: 'Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import "xxx" is not supported resolving ES modules imported from xxx/lib/index.js'
+
+**Solution:** In the '. vitepress/config. js' file, add the following code:
+
+```js
+export default defineConfig({
+  vite: {
+    // ...
+    ssr: {
+      noExternal: [/@opentiny\//]
+    }
+  }
+})
+```
diff --git a/examples/sites/demos/pc/webdoc/faq.md b/examples/sites/demos/pc/webdoc/faq.md
@@ -2,10 +2,10 @@
 
 ## 1、弹出元素在无界微前端中发生错位、翻转
 
-_原因：_ 弹出类的元素，存在一个边界检测逻辑，在子应用中，`window` 的宽高可能会比视口小得多，
+**原因：** 弹出类的元素，存在一个边界检测逻辑，在子应用中，`window` 的宽高可能会比视口小得多，
 因此会错误判断边界，导致翻转和错位等问题。
 
-_解决方案:_ 引入 popup 全局配置，将主应用的 `window` 赋值给全局配置的 `viewportWindow` 用于边界判断
+**解决方案：** 引入 `popup` 全局配置，将主应用的 `window` 赋值给全局配置的 `viewportWindow` 用于边界判断
 
 ```js
 import globalConfig from '@opentiny/vue-renderless/common/global'
@@ -16,3 +16,20 @@ if (window.__POWERED_BY_WUJIE__) {
   globalConfig.viewportWindow = window.parent
 }
 ```
+
+## 2、在 `Vitepress` 项目中，引用 `Opentiny` 组件包，使用 `Vitepress` 打包命令：`pnpm docs:build`，导致报错：`ERR_UNSUPPORTED_DIR_IMPORT`
+
+**原因：** 找不到组件包内引用相关文件的 `js/css/...` 等后缀路径，报错语句：`Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'xxx' is not supported resolving ES modules imported from xxx/lib/index.js`
+
+**解决方案：** 在`.vitepress/config.js`文件中，加入以下代码：
+
+```js
+export default defineConfig({
+  vite: {
+    // ...
+    ssr: {
+      noExternal: [/@opentiny\//]
+    }
+  }
+})
+```