Vue3造轮子之打包构建配置二级目录方式

项目代码打包初试

vue3 的项目是基于 vite 启动的，执行打包的时候，默认生成的 index.html 是加载根目录下的资源

如下图所示：

打包生成的文件，放在根目录下，是正常加载的。

但是当我们的项目需要配置在二级目录下时，资源的指向是有问题的。

此时会报 js 和 css 等文件找不到的错误。

配置项目二级目录

那么如何修改，让我们打包后的文件，带上二级目录的名字呢？

查询尤大的 vite库，看到关于公共文件的路径配置的一段话

这里的意思是我们在执行 build 的脚本时，在后面加一个配置指令即可

我根据这段提示，在 package.json 中做出如下修改

{
// 原本
"scripts": {
    "dev": "vite",
    "build": "vite build "
  }
// 修改
"scripts": {
    "dev": "vite",
    "build": "vite build --base=/lemon/"
  }
}

修改完成后再次执行 build 命令，可以发现我们的 index.html 的文件引入增加了二级目录的名称

如下图所示：

至此问题得到了解决！

总结

tips：多关注 Github 上的官方文档，有不懂的配置，一查就能查到了哦~

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。