Vite+Vue3预览打包项目传到GitHub首页空白文件加载报错404的解决办法。

错误重现

最近写了一个小项目，打算把静态页面部署到GitHub上，使用pages来展示预览，项目其实很简答，使用的是Vite+Vue等一些相关依赖搭建的，使用Vite打包，项目调试完毕觉得没有问题后，就在终端下使用命令打包了。结果部署到GitHub上打开项目后发现首页一片空白，这不科学啊？本体调试的好好的怎么打包之后就有问题了呢？后来使用vscode中的Live Server本地调试一下，也是空白一片。
案发现场具体效果如下：



后来看到了.js文件没有正常被加载，这说明文件的路径有问题。

解决办法

既然在调试的时候路径没问题，那就是打包的时候出的问题，查询官网，发现需要添加一条配置文件，具体如下：

  base:"./", //设置项目的根目录
  build: {
    outDir: 'docs' // 打包文件的输出目录
  }

另外build这个属性可以用来设置打包的目录名称，目前GitHub可以吧静态页面存放在项目的docs路径下部署，比较方便，这样我们添加这二个属性到项目根目录下的vite.config.js中就可以了。

终端运行打包命令，然后push项目，又可以愉快的打游戏了。