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

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

2022-03-29 16:07 更新

本指南建立在以下幾個假設基礎之上：

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

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

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

構建應用

你可以運行 npm run build 命令來執(zhí)行應用的構建。

$ npm run build

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

本地測試應用

當你構建完成應用后，你可以通過運行 npm run preview 命令，在本地測試該應用。

$ npm run build
$ npm run preview

?vite preview? 命令會在本地啟動一個靜態(tài) Web 服務器，將 dist 文件夾運行在 ?http://localhost:5000?。這樣在本地環(huán)境下查看該構建產(chǎn)物是否正?？捎镁头奖懔恕?/p>

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

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

現(xiàn)在 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、在你的項目中，創(chuàng)建一個 ?deploy.sh? 腳本，包含以下內容，運行腳本來部署站點：

#!/usr/bin/env sh

# 發(fā)生錯誤時終止
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 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? 中設置正確的 ?base?。
如果你要部署在 ?https://<USERNAME or GROUP>.github.io/? 上，你可以省略 ?base ?使其默認為 ?'/'?。
如果你要部署在 ?https://<USERNAME or GROUP>.github.io/<REPO>/?，例如你的倉庫地址為 ?https://github.com/<USERNAME>/<REPO>?，那么請設置 ?base ?為 ?'/<REPO>/'?。
2、在項目根目錄創(chuàng)建一個 ?.travis.yml? 文件
3、在本地運行 ?npm install? 并且提交（commit）生成的 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 上生成的 token，允許 Travis 推送代碼到你的倉庫。
  # 在倉庫的 Travis 設置頁面，設為安全的環(huán)境變量
  github_token: $GITHUB_TOKEN
  keep_history: true
  on:
    branch: master

GitLab Pages 配合 GitLab CI

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

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 上，使用以下設置，配置一個來自 GitHub 的項目：

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

2、點擊部署按鈕。

Google Firebase

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

{
  "root": "./dist"
}

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

5、配置好你的 Heroku git 遠程地址：

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

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

# 為靜態(tài)站點設置 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 應用，請確保它已被推送至一個 Git 倉庫。

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

vercel-configuration

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

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

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

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

注冊 Azure 賬號并獲取一個訂閱（subscription）的 key?？梢栽?nbsp;此處快速完成注冊。
將你的應用代碼托管到 GitHub。
在 VSCode 中安裝 SWA 擴展。

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

按照擴展程序的啟動向導，給你的應用程序起個名字，選擇框架預設，并指定應用程序的根目錄（通常為? /?）以及構建文件的路徑 ?/dist?。此向導完成后，會在你的 repo 中的 ?.github? 文件夾中創(chuàng)建一個 Github Action。

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

騰訊云Webify

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

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

應用配置如下：

構建命令填入 ?npm run build?
輸出目錄填入 ?dist?，
安裝命令填入 ?npm install?

webify-configuration

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

以上內容是否對您有幫助：

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

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

寫筆記

我要補充