Vite（三）部署静态站点（wordpress与hugo与Vercel、CI/CD、Travis CI、GitLab CI）、环境变量与模式、服务端渲染（SSR）

Vite（三）部署静态站点（wordpress与hugo与Vercel、CI/CD、Travis CI、GitLab CI）、环境变量与模式、服务端渲染（SSR）

• 网址：https://vitejs.cn/guide/why.html

1. 部署静态站点

• hugo跟wordpress其他建站工具的对比

  • wordpress 全球31%的网站使用wordpress，尽管他有各种主题和插件，但是也有非常多的缺点，安全性，seo不够友好，定制麻烦
  • hugo hexo最快的静态生成工具,seo友好，静态更安全，方便定制模板，缺点没有插件，如果要定制模板只能懂一点go的语法
  • wordpress是动态的并且还需要托管数据库，所以托管费用比较昂贵
  • 两个静态网页生成器：hexo和hugo。在使用两者之前就有将两者进行过对比，前者基于 node.js、后者基于 golang
  • hugo hexo是生成静态的页面，在本地生成后上传到服务器就可以了，托管费用非常便宜，可以直接用免费的github托管
    

下面的指引都基于以下几个假设：

• 你正在使用的是默认的构建输出路径（dist）。这个路径 可以使用 build.outDir 更改，在这种情况下，你可以从这篇指南中推断出所需的指令。
• Vite 已经被安装为了一个你项目的本地开发依赖（dev dependency），并且你已经配置好了如下的 npm script：
• 你正在使用 npm，或者使用了 Yarn 或其他的包管理工具，可以运行下面的脚本指令：

{
   
  "scripts": {
   
    "build": "vite build",
    "preview": "vite preview"
  }
}

值得注意的是 vite preview 旨在提供一个生产版本的本地预览，但不应直接作为一个生产服务器。

注意

本篇指引提供的指令旨在 本篇指南提供了如何执行 Vite 站点的静态部署的说明。Vite 也对服务端渲染（SSR）有了实验性的支持。SSR 是指支持在 Node 中运行相应应用的前端框架，预渲染成 HTML，最后在客户端激活（hydrate）。查看 SSR 指南 可以了解更多细节。另一方面，如果你正在寻找与传统服务端框架集成的方式，那么请查看 后端集成 章节。

构建应用

你可以运行 npm run build 命令来执行应用的构建。

$ npm run build

默认情况下，构建会输出到 dist 文件夹中。你可以部署这个 dist 文件夹到任何你喜欢的平台。

本地测试应用

当你构建完成应用后，你可以通过运行 npm run preview 命令，在本地测试该应用。

$ npm run build
$ npm run preview

preview 命令会启动一个本地静态 Web 服务器，将 dist 文件夹运行在 http://localhost:5000 上 。这样在本地查看该产物是否正常可用就十分容易了。

你可以使用 --port 标志传入一个参数来配置服务器的运行端口。

{
   
  "scripts": {
   
    "preview": "vite preview --port 8080"
  }
}

这样 preview 命令会改将服务器运行在 http://localhost:8080 上。

GitHub Pages

1. 在 vite.config.js 中设置正确的 base。

   如果你要部署在 https://<USERNAME>.github.io/，你可以省略 base 因为其默认为 '/'。

   如果你要部署在 https://<USERNAME>.github.io/<REPO>/，例如你的仓库地址为 https://github.com/<USERNAME>/<REPO>，那么请设置 base 为 '/<REPO>/'。

2. 在你的项目中，创建一个 deploy.sh 脚本，包含以下内容（注意高亮的未注释的行)，运行它来部署站点：

#!/usr/bin/env sh

# 发生任何错误时终止
set -e

# 构建
npm run build

# 进入输出产物文件夹
cd dist

# 如果你要部署到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果你要部署在 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果你要部署在 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

TIP

你也可以在你的 CI 启动时运行该脚本，使得在每次推送代码时自动部署。

GitHub Pages 配合 Travis CI

• Travis CI 提供的是持续集成服务（Continuous Integration，简称 CI）。它绑定 Github 上面的项目，只要有新的代码，就会自动抓取。然后，提供一个运行环境，执行测试，完成构建，还能部署到服务器。
• 持续集成指的是只要代码有变更，就自动运行构建和测试，反馈运行结果。确保符合预期以后，再将新代码"集成"到主干。
• 持续集成的好处在于，每次代码的小幅变更，就能看到运行结果，从而不断累积小的变更，而不是在开发周期结束时，一下子合并一大块代码。

1. 在 vite.config.js 中设置正确的 base。

   如果你要部署在 https://<USERNAME or GROUP>.github.io/，你可以省略 base 因为其默认为 '/'。

   如果你要部署在 https://<USERNAME or GROUP>.github.io/<REPO>/，例如你的仓库地址为 https://github.com/<USERNAME>/<REPO>，那么请设置 base 为 '/<REPO>/'。

2. 在项目根目录创建一个 .travis.yml 文件

3. 在本地运行 npm install 确认正常生成一个 lockfile (package-lock.json)。

4. 使用 GitHub Pages 提供的部署模板，并跟随 Travis CI 文档 进行配置：

language: node_js
node_js:
  - lts/*
install:
  - npm ci
script:
  - npm run build
deploy:
  provider: pages
  skip_cleanup: true
  local_dir: dist
  # 在 GitHub 上生成的令牌，允许 Travis 推送代码到你的仓库。
  # 在仓库对应的 Travis 设置页面中配置，用于安全控制。
  github_token: $GITHUB_TOKEN
  keep_history: true
  on:
    branch: master

GitLab Pages 配合 GitLab CI

• CI，Continuous Integration，为持续集成。即在代码构建过程中持续地进