Vite预建资产处理

Question

我正在使用 Vite 编写 Vue 应用程序。 我有一堆文件（10-100）位于

content

文件夹下：

content/block/paragraph.json
content/block/theorem.json
content/inliner/link.json
...

我想为我的应用程序构建导航数据，并在我的应用程序中使用此数据在侧边栏中生成

<nav>

。 Fot 我需要打开每个

json

文件并从那里获取一些数据（

title

属性）。

我想在我的应用程序中使用的计算

nav

的示例：

const nav = {
    "block/paragraph": "Paragraph", // Taken from 'content/block/paragraph.json'
    "block/theorem": "Theorem", // 'content/block/theorem.json'
    // ...
}

问题是我不应该在我的 Vue 应用程序中执行此操作，因为这需要时间，而且更糟糕的是，它将通过网络加载每个

json

文件，以及所有不必要的数据。

有没有办法在运行实际的 Vue 应用程序之前构建我的

nav

对象（或函数），而不是使用应用程序内已经构建的数据？ 我在这里看到三种可能的变体，但无法选择最好的：

单独的脚本来生成导航（不方便，因为我无法使用 Vite 功能，例如高级导入，并且必须在

npm run dev
1. + 创建包含导航数据的

   .temp

   文件夹之前单独运行脚本）
虚拟模块
2. 。可能是救星，但它需要将模块转换为字符串才能工作，而我不太明白如何正确执行此操作... 某种 Vite 插件但不是虚拟模块？
解决这个问题的最佳方法是什么？

一般来说，在运行实际应用程序之前并在应用程序内部使用它之前，是否有一种方便的方法来准备一些数据并进行计算？

Answer 1

// vite/nav.ts

/* Reading files and etc. */

class NavDataResult { /* ... */ }
const navData = /* ... */;
function getNavData(query: string) { /* ... */ }

//
// Vite Plugin
//

export default function nav(): Plugin
{
    const moduleId = 'virtual:nav';
    const resolvedModuleId = '\0' + moduleId;

    return {
        name: 'generated-nav',
        resolveId(id)
        {
            if (id === moduleId)
                return resolvedModuleId;
        },
        load(id)
        {
            if (id === resolvedModuleId)
            {
                return `
                    const NavDataResult = ${NavDataResult.toString()}
                    const navData = ${JSON.stringify(navData)}
                    export default ${getNavData.toString()}`;
            }
        }
    }
}

然后在

vite.config.ts

我们注册我们的虚拟模块：

// vite.config.ts

import nav from './vite/nav';

export default defineConfig({ /* ... */ plugins: [nav()] });

我们还需要在 

vite-env.d.ts

中注册类型提示，这样 VS Code 就不会抱怨从未知的导入

virtual:nav

:

// vite-env.d.ts

/// <reference types="vite/client" />

declare module 'virtual:nav' {
    type funcReturn = import('../vite/nav').NavDataResult;
    const result: (query: string) => funcReturn;
    export default result;
}

现在我们可以在我们的应用程序中使用虚拟模块。
完美！

<script setup lang="ts">
// Navigation.vue

import getNavData from 'virtual:nav';

console.log(getNavData('paragraph'));
</script>