记一次项目构建部署的总结

发表于 分类于 标签 , Disqus： 本文字数： 578 阅读时长 ≈ 2 分钟

前言

暑假里跟着鱼皮的yuindex项目写了个web终端的小玩具，完成的终端命令不多，但是大体上成型了。由于我打算做一个纯前端的项目，并没有写后端api，这样也方便我最终直接部署到Github Pages上（这样就不用花钱了hh）。

项目使用vite构建，并使用了ts。在构建部署时遇到了一些问题，由于是第一次将前端项目发布到github pages上，这里记录下。

生成了额外的源映射文件

例如在执行了pnpm run build后，虽然生成了dist文件夹和其中的内容，但是源文件中的.ts文件会额外生成.js和.js.map文件，.vue文件会额外生成.vue.js和.vue.js.map文件：

很明显这些额外生成的文件我们在发布部署项目时用不上，而且也无需提交到git上。摸索一番后，知道了这是TypeScript编译器生成的，我们需要修改项目的tsconfig.json文件。

对于.map文件：

1
2
3
4
5
{
  "compilerOptions": {
    "sourceMap": false
  }
}

对于ts生成的对应的js文件：

1
2
3
4
5
6
{
  "compilerOptions": {
    "allowJs": false, // 禁止编译JS文件
    "noEmit": true, // 仅进行类型检查，而不输出任何文件
  }
}

如何部署到Github Pages

在解决完前面的问题后，我们就可以将dist目录提交到github上了（记住要在.gitignore文件中排除dist目录），这里我们可以使用：

1
git subtree push --prefix dist origin gh-pages

这会将项目的子目录dist推送到远程仓库的gh-pages分支，如果远程仓库没有gh-pages分支，Git 会自动创建它并推送内容。

接着在Github仓库的Settings中设置部署的位置：

Github Pages项目路径错误

由于kerolt.github.io用作了我的博客，这个项目只能作为子项来部署，也就是通过kerolt.github.io/web-terminal来访问。完成前面的步骤后，我虽然能访问，但是其中的内容无法显示，其原因为无法正确获取对应的文件。

这是因为相当于是在嵌套的公共路径下部署项目，在vite中需指定 base 配置项：

1
2
3
4
5
6
// vite.config.ts

export default defineConfig({
  base: "/web-terminal/",
  // ...
});

至此，项目已经可以通过https://kerolt.github.io/web-terminal/来访问。