javascript - 请问使用vitepress 写文档，如何注入js代码？

Question

就是类似 lodash 将所有函数放到windows._上方便操作
我如何插入相关 js 文件 或者 vue ui等

Answer 1

可以参考这两篇文章
https://segmentfault.com/a/1190000041599324?utm_source=sf-similar-article
http://www.qianduan8.com/2126.html

Answer 2

在 VitePress 中，由于它基于 Vue 3 和 Vite，所以你不能直接将 JavaScript 代码注入到全局的 window 对象上，因为这样会破坏 VitePress 的封装性和模块化的好处。但是，你仍然有几种方法可以实现类似的功能。

方法 1: 使用 Vue 插件

如果你想要在 VitePress 项目的所有页面中都能使用某些功能，你可以考虑编写一个 Vue 插件，并在 VitePress 配置中引入它。

1. 创建 Vue 插件：在你的项目目录中创建一个 Vue 插件文件（例如 myPlugin.js）。
2. 注册插件：在 VitePress 的配置文件（例如 vite.config.js 或 vitepress.config.js）中，使用 defineConfig 和 vite 配置项来注册你的插件。

// vitepress.config.js
import { defineConfig } from 'vitepress'
import myPlugin from './myPlugin'

export default defineConfig({
  // ...其他配置
  vite: {
    plugins: [myPlugin()]
  }
})

3. 在插件中注入全局变量：在插件中，你可以使用 app.provide 方法来提供一个全局可用的变量或函数。

// myPlugin.js
export default () => {
  return {
    name: 'my-plugin',
    install(app, options) {
      app.provide('myGlobalFunction', () => {
        // 你的函数实现
      })
    }
  }
}

然后，在你的 Vue 组件中，你可以使用 inject 来获取并使用这个全局函数。

方法 2: 使用客户端注入

如果你只是想在客户端注入一些 JavaScript 代码（例如用于分析或跟踪），你可以考虑使用 VitePress 的 enhanceApp.js 文件。这个文件允许你修改 Vue 应用实例创建之前的配置。

1. 创建 enhanceApp.js：在你的 VitePress 项目根目录下创建一个 enhanceApp.js 文件。
2. 注入 JavaScript 代码：在这个文件中，你可以直接修改 app 实例或添加全局方法。但是请注意，直接修改 window 对象可能不是最佳实践。

// enhanceApp.js
export default ({ Vue, app, router, siteData }) => {
  // 例如，添加一个全局方法到 Vue.prototype
  Vue.prototype.$myGlobalFunction = () => {
    // 你的函数实现
  }

  // 或者，如果你确实需要修改 window 对象（不推荐），可以这样做：
  // window.myGlobalFunction = () => { /* ... */ }
}

然后，在你的 Vue 组件中，你可以通过 this.$myGlobalFunction 来访问这个全局方法（如果你选择添加到 Vue.prototype 的话）。

方法 3: 使用外部脚本

虽然不推荐直接在 VitePress 项目中修改 window 对象，但如果你确实需要这样做，并且知道这样做的后果，你可以考虑在公共的 HTML 文件中添加外部脚本。然而，请注意，这可能会破坏 VitePress 的封装性和模块化。

你可以在 VitePress 的 .vitepress/theme/Layout.vue 文件中添加外部脚本引用，但这通常不是推荐的做法。

注意事项

• 尽量避免直接修改 window 对象，因为它会破坏模块化的好处并可能导致难以预料的副作用。
• 使用 Vue 插件和 provide/inject 机制是更推荐的方式来在 Vue 应用程序中共享功能和数据。
• 如果你需要注入外部库或框架（如 lodash），请考虑使用 Vite 的模块解析功能来正确地导入和使用它们。