Rsbuild项目打包后打开index.html白屏——已解决

背景描述

前端小白，因工作调动正在努力自学，记录一下遇到的问题和解决的办法。

问题描述

由于工作需求要开发一个适用于移动端的简单网页，查找了一番之后决定使用VantUI作为基础的库，然后看到VantUI官网介绍建议使用Rsbuild工具开发。
开发调试到尾声尝试打包的时候出现了打包完成的index.html页面打开白屏的问题。

解决思路

上周第一次使用Vue cli做pc端网页的时候打包也遇到了类似的问题，上次解决的经验是打包的路径配置问题，默认为绝对路径，而解决办法是将路径改为相对路径。
在vue cli 里面需要对publicPath做配置；

解决办法

官网中关于Rsbuild配置的说明
关于Rsbuild配置项的详情

在翻看文档的时候发现了熟悉的关键词：

尝试一下：

//在rsbuild.config.mjs文件中
//export default defineConfig({})中添加：
output: {
    assetPrefix: './',
  },

终于尝试成功了！ 打包之后可以正常显示！

其他问题

我跟着官方教程运行以下命令生成的项目

npm create rsbuild@latest

在项目目录中没有index.html文件，查看官网的说明，不设置的情况下，rsbuild会使用默认的模板，创建时不会生成index.html；
需求：
由于工作情况需要导入两个js库文件，正常在index.js文件里面import过不了编译（不知道为什么，一直没解决的烦恼）
之前尝试了一个“曲线救国”的方式是在html里面通过cnd的方式导入才不会报错
所以在这个项目里我就需要使用自定义模板，或者向官方模板里面插入内容。

// 选择了自定义模板的方式
html:{
    template:'./static/index.html'
  }

完整的rsbuild.config.js代码：

import { defineConfig } from '@rsbuild/core';
import { pluginVue2 } from '@rsbuild/plugin-vue2';
import { pluginBabel } from '@rsbuild/plugin-babel';
import { pluginVue2Jsx } from '@rsbuild/plugin-vue2-jsx';

export default defineConfig({
  plugins: [
    pluginVue2(),
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
      exclude: /[\\/]node_modules[\\/]/
    }),
    pluginVue2Jsx(),
  ],
  // root:'./',
  output: {
    assetPrefix: './',
  },
  html:{
    template:'./static/index.html'
  }
});