升级vite4后项目打包后主页丢失<script type=module src='xxx.css'>

可能是由于 Vite4 更改了默认的输出目录，导致打包后的文件路径不正确。您可以尝试在 Vite4 的配置文件中添加以下内容来解决问题： ``` // vite.config.js export default { build: { outDir: 'dist', // 输出目录 rollupOptions: { output: { // 修复打包后的文件路径 manualChunks: { 'xxx.css': ['xxx.css'] } } } } } ``` 其中，`outDir` 为输出目录，`manualChunks` 可以手动指定打包后的文件路径。您可以将 `xxx.css` 替换成您实际的文件路径。然后，重新运行打包命令即可。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/static/nlogo.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> <link rel="stylesheet" href="/static/css/index-2e70103c.css"> </head> <body> <div id="app"></div> <script crossorigin src="/static/js/index-2d27bd93.js"></script> </body> </html>

从你的代码片段来看，你的 `index.html` 文件中引用了两个静态资源文件，一个是 `index-2e70103c.css`，另一个是 `index-2d27bd93.js`。这两个文件都位于 `/static` 目录下，因此你需要确保在服务器上能够正确地映射到这个目录，并且这些文件的实际路径与 `index.html` 文件中引用的路径一致。如果你使用的是相对路径，那么你需要确保这些文件相对于 `index.html` 文件的位置是正确的。同时，你也需要检查一下这些文件是否被正确地打包，并且是否存在于你的服务器上。

116 | </FormItem> 117 | <Button className="c-w-[90px]" type='primary' style={commonButtonStyle} loading={isLoading} htmlType='submit'>绑定信息</Button> > 118 | </FormItem> | ^ 119 | </Form> 120 | </div> 121 | ); 10:10:12 [vite] Internal server error: D:\IDEA\IdeaProjects\react\src\pages\Account\Bind.tsx: Expected corresponding JSX closing tag for <Form>. (118:4) 116 | </FormItem> 117 | <Button className="c-w-[90px]" type='primary' style={commonButtonStyle} loading={isLoading} htmlType='submit'>绑定信息</Button> > 118 | </FormItem> | ^ 119 | </Form> 120 | </div> 121 | ); Plugin: vite:react-babel File: D:/IDEA/IdeaProjects/react/src/pages/Account/Bind.tsx 116| </FormItem> 117| <Button className="c-w-[90px]" type='primary' style={commonButtonStyle} loading={isLoading} htmlType='submit'>绑定信息</Button> 118| </FormItem> | ^ 119| </Form> 120| </div>

根据你提供的代码片段，看起来你在第118行缺少了对<FormItem>的关闭标签。</FormItem>应该在118行之前添加。</FormItem>标签，以匹配开放标签<FormItem>。这将解决你遇到的错误信息。你可以尝试在代码中添加以下行： ``` </FormItem> ``` 这样，你的代码就会变成： ```jsx 116 | </FormItem> 117 | <Button className="c-w-[90px]" type='primary' style={commonButtonStyle} loading={isLoading} htmlType='submit'>绑定信息</Button> 118 | </FormItem> 119 | </Form> 120 | </div> 121 | ); ``` 请确保所有的开放标签都有相应的关闭标签，以保持正确的语法。希望这可以帮助到你！如果你还有其他问题，请随时提问。

阅读全文

升级vite4后项目打包后主页丢失<script type=module src='xxx.css'>

相关推荐

解决vue+elementui项目打包后样式变化问题

vue3+vite4+Three的3d项目electron在麒麟V10系统下的打包

react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass

Vue3+ts+vite 并且使用 <script lang="ts" setup>语法 watch 无效

Vue3+ts+vite 并且使用 <script lang="ts" setup>语法 watch函数无效

用Vue3+ts+vite 并且使用 <script lang="ts" setup>语法 写一个输入6位验证码的6个输入框

用Vue3+ts+vite 并且使用 <script lang="ts" setup> 写一个使用退格键从第六个输入框开始删除

解释

用Vue3+ts+vite 并且使用 <script lang="ts" setup> 写一个动态生成6个编辑框，并且判断所有编辑框内容是否都已经填写

给一个demo示例，在vue3+vite小程序中，使用Chart.js插件， 用pnpm install Chart.js的方式使用，并在项目中配置Chart.js，vue页面中<script setup lang="ts"></script>

给一个demo示例，在vue3+vite小程序中，使用Chart.js插件， 用pnpm install Chart.js的方式使用，vue页面中<script setup lang="ts"></script>

<reference types="vite/client" />

const base = import.meta.env.VITE_EBAG_BASEURL

[vite] Internal server error: At least one <template> or <script> is required in a single file component.

vue3+vite前端项目，<script setup lang=“ts”>中，iframe嵌套了部分菜单路由，加载过程路由页面中出现白屏闪一下，如何处理

给一个demo示例，在vue3+vite小程序中使用uCharts插件，并用原生方式导入：<script setup lang="ts"> import uCharts from "@qiun/ucharts"; </script>

11:14:51 [vite] Internal server error: At least one <template> or <script> is required in a single file component.

18:17:20 [vite] Internal server error: At least one <template> or <script> is required in a single file component.

最新推荐

Vue3项目打包后部署到服务器 请求不到后台接口解决方法

记一次react前端项目打包优化的方法

vue打包后显示空白正确处理方法

Vue打包后出现一些map文件的解决方法

Pytorch版代码幻灯片.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

用Vue3+ts+vite 并且使用 <script lang="ts" setup>语法写一个输入6位验证码的6个输入框

给一个demo示例，在vue3+vite小程序中，使用Chart.js插件，用pnpm install Chart.js的方式使用，并在项目中配置Chart.js，vue页面中<script setup lang="ts"></script>

给一个demo示例，在vue3+vite小程序中，使用Chart.js插件，用pnpm install Chart.js的方式使用，vue页面中<script setup lang="ts"></script>

Vue3项目打包后部署到服务器请求不到后台接口解决方法