我尝试构建我的 Vite + React 应用程序,但是当我执行 npm run Preview 时,页面变为空白。 vite.config.js
import external from "rollup-plugin-peer-deps-external";
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import commonjs from '@rollup/plugin-commonjs';
export default defineConfig(async () => {
const mdx = await import("@mdx-js/rollup")
return {
optimizeDeps: {
include: ["react/jsx-runtime"],
},
plugins: [react(), mdx.default({ remarkPlugins: [] }), commonjs(), external({
includeDependencies: true
}),],
}
})
错误:未捕获类型错误:无法解析模块说明符“vite/modulepreload-polyfill”。相对引用必须以“/”、“./”或“../”开头。
尝试的解决方案根据此:https://vitejs.dev/config/build-options#build-polyfillmodulepreload我尝试修改我的vite.config.js
import external from "rollup-plugin-peer-deps-external";
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import commonjs from '@rollup/plugin-commonjs';
export default defineConfig(async () => {
const mdx = await import("@mdx-js/rollup")
return {
optimizeDeps: {
include: ["react/jsx-runtime"],
},
plugins: [react(), mdx.default({ remarkPlugins: [] }), commonjs(), external({
includeDependencies: true
}),],
build: {
polyfillModulePreload: false
}
}
})
新错误未捕获的类型错误:无法解析模块说明符“react/jsx-runtime”。相对引用必须以“/”、“./”或“../”开头。
简化代码是最好的选择。我的构建现在工作得很好。
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
server: { host: "127.0.0.1", port: 81 },
});