閱讀(3k) 書簽贊(0) 我要糾錯

Vite 部署靜態(tài)站點

2022-03-29 16:07 更新

本指南建立在以下幾個假設(shè)基礎(chǔ)之上：

你正在使用的是默認(rèn)的構(gòu)建輸出路徑（?dist?）。這個路徑可以通過 ?build.outDir? 更改，在這種情況下，你可以從這篇指南中找到出所需的指引。
你正在使用 NPM；或者 Yarn 等其他可以運行下面的腳本指令的包管理工具。
Vite 已作為一個本地開發(fā)依賴（dev dependency）安裝在你的項目中，并且你已經(jīng)配置好了如下的 npm scripts：

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

值得注意的是 vite preview 用作預(yù)覽本地構(gòu)建，而不應(yīng)直接作為生產(chǎn)服務(wù)器。

構(gòu)建應(yīng)用

你可以運行 npm run build 命令來執(zhí)行應(yīng)用的構(gòu)建。

$ npm run build

默認(rèn)情況下，構(gòu)建會輸出到 dist 文件夾中。你可以部署這個 dist 文件夾到任何你喜歡的平臺。

本地測試應(yīng)用

當(dāng)你構(gòu)建完成應(yīng)用后，你可以通過運行 npm run preview 命令，在本地測試該應(yīng)用。

$ npm run build
$ npm run preview

?vite preview? 命令會在本地啟動一個靜態(tài) Web 服務(wù)器，將 dist 文件夾運行在 ?http://localhost:5000?。這樣在本地環(huán)境下查看該構(gòu)建產(chǎn)物是否正常可用就方便了。

你可以通過 ?--port? 參數(shù)來配置服務(wù)的運行端口。

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

現(xiàn)在 preview 命令會將服務(wù)器運行在 ?http://localhost:8080?。

GitHub Pages

1、在 ?vite.config.js? 中設(shè)置正確的 ?base?。
如果你要部署在 ?https://<USERNAME>.github.io/? 上，你可以省略 ?base ?使其默認(rèn)為 ?'/'?。
如果你要部署在 ?https://<USERNAME>.github.io/<REPO>/? 上，例如你的倉庫地址為 ?https://github.com/<USERNAME>/<REPO>?，那么請設(shè)置 ?base ?為 ?'/<REPO>/'?。
2、在你的項目中，創(chuàng)建一個 ?deploy.sh? 腳本，包含以下內(nèi)容，運行腳本來部署站點：

#!/usr/bin/env sh

# 發(fā)生錯誤時終止
set -e

# 構(gòu)建
npm run build

# 進(jìn)入構(gòu)建文件夾
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 main

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

cd -

你也可以在你的 CI 中配置該腳本，使得在每次推送代碼時自動部署。

GitHub Pages 配合 Travis CI

1、在 ?vite.config.js? 中設(shè)置正確的 ?base?。
如果你要部署在 ?https://<USERNAME or GROUP>.github.io/? 上，你可以省略 ?base ?使其默認(rèn)為 ?'/'?。
如果你要部署在 ?https://<USERNAME or GROUP>.github.io/<REPO>/?，例如你的倉庫地址為 ?https://github.com/<USERNAME>/<REPO>?，那么請設(shè)置 ?base ?為 ?'/<REPO>/'?。
2、在項目根目錄創(chuàng)建一個 ?.travis.yml? 文件
3、在本地運行 ?npm install? 并且提交（commit）生成的 lockfile (?package-lock.json?)。
4、使用 ?GitHub Pages? 部署的配置文件模板，并按照 Travis CI 文檔進(jìn)行配置：

language: node_js
node_js:
  - lts/*
install:
  - npm ci
script:
  - npm run build
deploy:
  provider: pages
  skip_cleanup: true
  local_dir: dist
  # 在 GitHub 上生成的 token，允許 Travis 推送代碼到你的倉庫。
  # 在倉庫的 Travis 設(shè)置頁面，設(shè)為安全的環(huán)境變量
  github_token: $GITHUB_TOKEN
  keep_history: true
  on:
    branch: master

GitLab Pages 配合 GitLab CI

1、在 ?vite.config.js? 中設(shè)置正確的 ?base?。
如果你要部署在 ?https://<USERNAME or GROUP>.gitlab.io/? 上，你可以省略 ?base ?使其默認(rèn)為? '/'?。
如果你要部署在 ?https://<USERNAME or GROUP>.gitlab.io/<REPO>/? 上，例如你的倉庫地址為 ?https://gitlab.com/<USERNAME>/<REPO>?，那么請設(shè)置 ?base ?為 ?'/<REPO>/'?。
2、在項目根目錄創(chuàng)建一個 ?.gitlab-ci.yml? 文件，并包含以下內(nèi)容。它將使得每次你更改內(nèi)容時都重新構(gòu)建與部署站點：

image: node:16.5.0
pages:
  stage: deploy
  cache:
    key:
      files:
        - package-lock.json
      prefix: npm
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
    - cp -a dist/. public/
  artifacts:
    paths:
      - public
  rules:
    - $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

Netlify

1、在 Netlify 上，使用以下設(shè)置，配置一個來自 GitHub 的項目：

構(gòu)建命令： ?vite build? 或 ?npm run build?
發(fā)布目錄： ?dist?

2、點擊部署按鈕。

Google Firebase

1、確保已經(jīng)安裝 firebase-tools。
2、在項目根目錄創(chuàng)建 ?firebase.json? 和 ?.firebaserc? 兩個文件，包含以下內(nèi)容：
?firebase.json?:

{
  "hosting": {
    "public": "dist",
    "ignore": [],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

.firebaserc:

{
  "projects": {
    "default": "<YOUR_FIREBASE_ID>"
  }
}

3、運行 ?npm run build? 后，通過 ?firebase deploy? 命令部署。

Surge

首先確保已經(jīng)安裝 surge。
運行 ?npm run build?。
運行 ?surge dist? 命令部署到 surge。

你也可以通過添加 ?surge dist yourdomain.com? 部署到一個自定義域名。

Heroku

1、安裝 Heroku CLI。
2、注冊一個 Heroku 賬號。
3、運行 ?heroku login? 并填入你的 Heroku 憑證：

$ heroku login

4、在項目根目錄創(chuàng)建一個 ?static.json? ，包含以下內(nèi)容：
?static.json?:

{
  "root": "./dist"
}

這是你站點的配置，閱讀 heroku-buildpack-static 文檔來了解更多。

5、配置好你的 Heroku git 遠(yuǎn)程地址：

# 版本變更
$ git init
$ git add .
$ git commit -m "My site ready for deployment."

# 創(chuàng)建一個具有指定名稱的新應(yīng)用
$ heroku apps:create example

# 為靜態(tài)站點設(shè)置 buildpack
$ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git

6、部署站點：

# 發(fā)布站點
$ git push heroku master

# 在瀏覽器中打開 Heroku 的面板
$ heroku open

Vercel

要通過 Vercel for Git 部署你的 Vite 應(yīng)用，請確保它已被推送至一個 Git 倉庫。

進(jìn)入 https://vercel.com/import/git 并根據(jù)你的 Git 托管服務(wù)（GitHub, GitLab 或 BitBucket）將項目導(dǎo)入 Vercel。根據(jù)指引，選擇帶有 ?package.json? 的項目根目錄。并使用 ?npm run build? 來覆寫構(gòu)建步驟，并將輸出目錄設(shè)置為 ?./dist?

vercel-configuration

在項目被導(dǎo)入之后，所有后續(xù)的推送都將生成預(yù)覽部署，但只有對生產(chǎn)分支（通常是 “main”）所做的更改才會觸發(fā)生產(chǎn)部署。

一旦部署，你會得到一個實時查看應(yīng)用的 URL，如 https://vite.vercel.app。

Azure的靜態(tài)網(wǎng)站應(yīng)用

你可以通過微軟 Azure 的靜態(tài)網(wǎng)站應(yīng)用服務(wù)來快速部署你的 Vite 應(yīng)用。你只需：

注冊 Azure 賬號并獲取一個訂閱（subscription）的 key。可以在此處快速完成注冊。
將你的應(yīng)用代碼托管到 GitHub。
在 VSCode 中安裝 SWA 擴(kuò)展。

安裝完此擴(kuò)展后，進(jìn)入你應(yīng)用的根目錄。打開 SWA 的擴(kuò)展程序，登錄 Azure，并點擊 '+'，來創(chuàng)建一個全新的 SWA。系統(tǒng)會提示你指定所需的訂閱 key。

按照擴(kuò)展程序的啟動向?qū)?，給你的應(yīng)用程序起個名字，選擇框架預(yù)設(shè)，并指定應(yīng)用程序的根目錄（通常為? /?）以及構(gòu)建文件的路徑 ?/dist?。此向?qū)瓿珊?，會在你?repo 中的 ?.github? 文件夾中創(chuàng)建一個 Github Action。

這個 action 致力于部署你的應(yīng)用程序（可以在倉庫的 Actions 標(biāo)簽中，查看相關(guān)進(jìn)度），成功完成后，你可以點擊 Github 中出現(xiàn)的 “瀏覽站點” 的按鈕，查看你的應(yīng)用程序。

騰訊云Webify

騰訊云 Webify 支持從 Git 倉庫直接部署您的 Vite 應(yīng)用。

進(jìn)入 Webify 新建應(yīng)用頁面，根據(jù)選擇您代碼倉庫所在的 Git 平臺（GitHub、GitLab 或者 Gitee 碼云），完成授權(quán)流程后，便可導(dǎo)入倉庫。

應(yīng)用配置如下：

構(gòu)建命令填入 ?npm run build?
輸出目錄填入 ?dist?，
安裝命令填入 ?npm install?

webify-configuration

應(yīng)用創(chuàng)建之后，等待構(gòu)建、部署完畢，便可以通過應(yīng)用的默認(rèn)域名（.app.tcloudbase.com）來訪問應(yīng)用。如 https://my-vite-vue-app-4gi9tn1478d8ee71-1255679239.ap-shanghai.app.tcloudbase.com/

以上內(nèi)容是否對您有幫助：

← Vite 構(gòu)建生產(chǎn)版本

Vite 環(huán)境變量和模式 →

寫筆記

我要補(bǔ)充