spa*_*ark 6 typescript reactjs vite
我有一个遗留的 typescript React 应用程序，现在我想将其从 webpack 迁移到 vite，当我使用此命令构建应用程序时，显示如下错误：
\n> tsc && vite build\n\nvite v4.3.5 building for production...\n\xe2\x9c\x93 2 modules transformed.\n\xe2\x9c\x93 built in 32ms\n[vite]: Rollup failed to resolve import "/src/main.tsx" from "/Users/John/source/reddwarf/frontend/snap-web/src/index.html".\nThis is most likely unintended because it can break your application at runtime.\nIf you do want to externalize this module explicitly add it to\n`build.rollupOptions.external`\nerror during build:\nError: [vite]: Rollup failed to resolve import "/src/main.tsx" from "/Users/John/source/reddwarf/frontend/snap-web/src/index.html".\nThis is most likely unintended because it can break your application at runtime.\nIf you do want to externalize this module explicitly add it to\n`build.rollupOptions.external`\n at viteWarn (file:///Users/John/source/reddwarf/frontend/snap-web/node_modules/.pnpm/vite@4.3.5_@types+node@16.18.23/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46561:23)\n at onwarn (file:///Users/John/source/reddwarf/frontend/snap-web/node_modules/@vitejs/plugin-react/dist/index.mjs:237:9)\n at onRollupWarning (file:///Users/John/source/reddwarf/frontend/snap-web/node_modules/.pnpm/vite@4.3.5_@types+node@16.18.23/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46582:9)\n at onwarn (file:///Users/John/source/reddwarf/frontend/snap-web/node_modules/.pnpm/vite@4.3.5_@types+node@16.18.23/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:46332:13)\n at Object.onwarn (file:///Users/John/source/reddwarf/frontend/snap-web/node_modules/.pnpm/rollup@3.21.5/node_modules/rollup/dist/es/shared/node-entry.js:25305:13)\n at ModuleLoader.handleInvalidResolvedId (file:///Users/John/source/reddwarf/frontend/snap-web/node_modules/.pnpm/rollup@3.21.5/node_modules/rollup/dist/es/shared/node-entry.js:23940:26)\n at file:///Users/John/source/reddwarf/frontend/snap-web/node_modules/.pnpm/rollup@3.21.5/node_modules/rollup/dist/es/shared/node-entry.js:23900:26\n\xe2\x80\x89ELIFECYCLE\xe2\x80\x89 Command failed with exit code 1.\n我应该怎么做才能解决这个问题？我从互联网上搜索似乎没有人面临类似的问题。这是vite.config.ts：
import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport path from 'path';\n\nexport default defineConfig({\n root: path.join(__dirname, 'src'),\n plugins: [react()],\n build:{\n outDir: "build"\n }\n})\n这是我从通过命令创建的标准库粘贴的 main.tsx npm create vite@latest my-vue-app -- --template react-ts：
import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport './index.css'\n\nReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(\n <React.StrictMode>\n <div>ddddd</div>\n </React.StrictMode>,\n)\n这是index.html：
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="utf-8" />\n <link rel="icon" href="/favicon.ico" />\n <meta name="viewport" content="width=device-width, initial-scale=1" />\n <meta name="theme-color" content="#000000" />\n <meta\n name="description"\n content="Web site created using create-react-app"\n />\n <link rel="apple-touch-icon" href="/logo192.png" />\n <!--\n manifest.json provides metadata used when your web app is installed on a\n user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/\n -->\n <link rel="manifest" href="/manifest.json" />\n <!--\n Notice the use of %PUBLIC_URL% in the tags above.\n It will be replaced with the URL of the `public` folder during the build.\n Only files inside the `public` folder can be referenced from the HTML.\n\n Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will\n work correctly both with client-side routing and a non-root public URL.\n Learn how to configure a non-root public URL by running `npm run build`.\n -->\n <title>title</title>\n </head>\n <body>\n <noscript>You need to enable JavaScript to run this app.</noscript>\n <div id="root"></div>\n <script type="module" src="/src/main.tsx"></script>\n </body>\n</html>\n小智 6
与这个问题类似，默认vite.config.ts文件如下所示：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
如果您使用 运行构建脚本npm run build，它会起作用，因为该index.html文件位于项目的根级目录中。
rootDir/
|- src/
|- <src dir contents>
|- index.html
|- vite.config.ts
通过传递root这样的属性，root: path.join(__dirname, 'src')您将请求index.html放置在目录中的文件src。
现在，由于您是从 webpack 迁移的，因此您可能在目录中拥有该文件，index.html并且您尝试修改中的文件以找到正确的入口点。然而vite文件是这样链接到文件的srcrootvite.config.tsindex.htmlmain.tsx
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
您需要做的就是将文件结构更改为与 vite 默认为您提供的文件结构相同：
将您的vite.config.ts文件更改为：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
build:{
outDir: "build"
}
})
然后将index.html文件移动到根目录。
| 归档时间： |
|
| 查看次数： |
19079 次 |
| 最近记录： |