我正在使用GLOB导入加载目录中的所有标记文件:
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>
螺丝配置:
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 } }
});
我try 按照Vue + Vite + Rollup: Dynamic import not working on production build中的建议将以下选项添加到我的RolupOptions中，但似乎不起作用
export default defineConfig({
build: {
rollupOptions: {
external: [
"/path/to/external/module.es.js"
]
}
}
})
任何帮助都将不胜感激.