我正在使用glob import加载目录中的所有markdown文件：
const useGetChangelogs = () => {
const [changelogs, setChangelogs] = useState<string[]>([]);
useEffect(() => {
const arr: string[] = [];
Promise.all(Object.keys(import.meta.glob("~/changelogs/*.md")).sort((a, b) => b.localeCompare(a))
.map(async (file) => fetch(file)
.then((res) => res.text())
.then((str) => arr.push(str))
)
).then(() => setChangelogs(arr)).catch((err) => console.error(err));
}, []);
return changelogs;
};它在运行开发版本时运行良好，但在生产环境中显示以下内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Error</title> </head> <body> <pre>Cannot GET /changelogs/v0.8.4-alpha.md</pre> </body> </html>Vite配置：
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import eslint from "vite-plugin-eslint";
import svgr from "vite-plugin-svgr";
import path from "path";
import autoprefixer from "autoprefixer";
const output = {
manualChunks: (id: string) => {
if (id.includes("node_modules")) return id.toString().split("node_modules/")[1].split("/")[0].toString();
}
};
export default defineConfig({
server: { host: "0.0.0.0", port: 3000 },
resolve: { alias: { "~": path.resolve(__dirname, "src") } },
css: { postcss: { plugins: [autoprefixer()] }, modules: { localsConvention: "camelCase" } },
plugins: [react(), eslint(), svgr()],
assetsInclude: ["**/*.md"],
build: { rollupOptions: { output } }
});我尝试按照Vue + Vite + Rollup: Dynamic import not working on production build的建议将以下内容添加到我的rollupOptions中，但似乎不起作用
export default defineConfig({
build: {
rollupOptions: {
external: [
"/path/to/external/module.es.js"
]
}
}
})任何帮助将非常感谢。
1条答案
按热度按时间von4xj4u1#
最后我自己解决了这个问题。在对Glob导入有了更好的理解之后，我能够抛弃自定义钩子，选择一个简单得多的解决方案。
此解决方案还有一个好处，即不使用fetch，文件在构建时导入，而不是在运行时导入。
我还能够使用此解决方案从我的Vite配置中删除
assetsInclude: ["**/*.md"]。