閱讀(7.9k) 書簽贊(0) 我要糾錯(cuò)

Vue CLI 部署

2020-03-13 15:10 更新

通用指南

如果你用 Vue CLI 處理靜態(tài)資源并和后端框架一起作為部署的一部分，那么你需要的僅僅是確保 Vue CLI 生成的構(gòu)建文件在正確的位置，并遵循后端框架的發(fā)布方式即可。

如果你獨(dú)立于后端部署前端應(yīng)用——也就是說后端暴露一個(gè)前端可訪問的 API，然后前端實(shí)際上是純靜態(tài)應(yīng)用。那么你可以將 dist 目錄里構(gòu)建的內(nèi)容部署到任何靜態(tài)文件服務(wù)器中，但要確保正確的 publicPath。

本地預(yù)覽

dist 目錄需要啟動(dòng)一個(gè) HTTP 服務(wù)器來訪問 (除非你已經(jīng)將 publicPath 配置為了一個(gè)相對(duì)的值)，所以以 file:// 協(xié)議直接打開 dist/index.html 是不會(huì)工作的。在本地預(yù)覽生產(chǎn)環(huán)境構(gòu)建最簡(jiǎn)單的方式就是使用一個(gè) Node.js 靜態(tài)文件服務(wù)器，例如 serve：

npm install -g serve
# -s 參數(shù)的意思是將其架設(shè)在 Single-Page Application 模式下
# 這個(gè)模式會(huì)處理即將提到的路由問題
serve -s dist

使用 history.pushState 的路由

如果你在 history 模式下使用 Vue Router，是無法搭配簡(jiǎn)單的靜態(tài)文件服務(wù)器的。例如，如果你使用 Vue Router 為 /todos/42/ 定義了一個(gè)路由，開發(fā)服務(wù)器已經(jīng)配置了相應(yīng)的 localhost:3000/todos/42 響應(yīng)，但是一個(gè)為生產(chǎn)環(huán)境構(gòu)建架設(shè)的簡(jiǎn)單的靜態(tài)服務(wù)器會(huì)卻會(huì)返回 404。

為了解決這個(gè)問題，你需要配置生產(chǎn)環(huán)境服務(wù)器，將任何沒有匹配到靜態(tài)文件的請(qǐng)求回退到 index.html。Vue Router 的文檔提供了常用服務(wù)器配置指引。

CORS

如果前端靜態(tài)內(nèi)容是部署在與后端 API 不同的域名上，你需要適當(dāng)?shù)嘏渲?nbsp;CORS。

PWA

如果你使用了 PWA 插件，那么應(yīng)用必須架設(shè)在 HTTPS 上，這樣 Service Worker 才能被正確注冊(cè)。

平臺(tái)指南

GitHub Pages

手動(dòng)推送更新

在 vue.config.js 中設(shè)置正確的 publicPath。如果打算將項(xiàng)目部署到 https://<USERNAME>.github.io/ 上, publicPath 將默認(rèn)被設(shè)為 "/"，你可以忽略這個(gè)參數(shù)。如果打算將項(xiàng)目部署到 https://<USERNAME>.github.io/<REPO>/ 上 (即倉(cāng)庫(kù)地址為 https://github.com/<USERNAME>/<REPO>)，可將 publicPath 設(shè)為 "/<REPO>/"。舉個(gè)例子，如果倉(cāng)庫(kù)名字為“my-project”，那么 vue.config.js 的內(nèi)容應(yīng)如下所示：module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/my-project/' : '/' }
在項(xiàng)目目錄下，創(chuàng)建內(nèi)容如下的 deploy.sh (可以適當(dāng)?shù)厝∠⑨? 并運(yùn)行它以進(jìn)行部署： #!/usr/bin/env sh # 當(dāng)發(fā)生錯(cuò)誤時(shí)中止腳本 set -e # 構(gòu)建 npm run build # cd 到構(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 master # 部署到 https://<USERNAME>.github.io/<REPO> # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages cd -

使用 Travis CI 自動(dòng)更新

仿照上面在 vue.config.js 中設(shè)置正確的 publicPath。
安裝 Travis CLI 客戶端：gem install travis && travis --login
生成一個(gè)擁有“repo”權(quán)限的 GitHub 訪問令牌。
授予 Travis 訪問倉(cāng)庫(kù)的權(quán)限：travis set GITHUB_TOKEN=xxx (xxx 是第三步中的個(gè)人訪問令牌)
在項(xiàng)目根目錄下創(chuàng)建一個(gè) .travis.yml 文件。language: node_js node_js: - "node" cache: npm script: npm run build deploy: provider: pages skip_cleanup: true github_token: $GITHUB_TOKEN local_dir: dist on: branch: master
將 .travis.yml 文件推送到倉(cāng)庫(kù)來觸發(fā)第一次構(gòu)建。

GitLab Pages

根據(jù) GitLab Pages 文檔的描述，所有的配置都在根目錄中的.gitlab-ci.yml 文件中。下面的范例是一個(gè)很好的入門:

# .gitlab-ci.yml 文件應(yīng)放在你倉(cāng)庫(kù)的根目錄下 

pages: # 必須定義一個(gè)名為 pages 的 job
  image: node:latest
  stage: deploy
  script:
    - npm ci
    - npm run build
    - mv public public-vue # GitLab Pages 的鉤子設(shè)置在 public 文件夾
    - mv dist public # 重命名 dist 文件夾 (npm run build 之后的輸出位置)
  artifacts:
    paths:
      - public # artifact path 一定要在 /public , 這樣 GitLab Pages 才能獲取
  only:
    - master

通常, 你的靜態(tài)頁(yè)面將托管在 https://yourUserName.gitlab.io/yourProjectName 上, 所以你可以創(chuàng)建一個(gè) initial vue.config.js 文件去更新 BASE_URL 要匹配的值：

// vue.config.js 位于倉(cāng)庫(kù)的根目錄下
// 確保用 GitLab 項(xiàng)目的名稱替換了 `YourProjectName`

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/yourProjectName/'
    : '/'
}

請(qǐng)閱讀在 GitLab Pages domains 的文檔來學(xué)習(xí)更多關(guān)于頁(yè)面部署 URL 的信息。注意，你也可以使用自定義域名。

在推送到倉(cāng)庫(kù)之前提交 .gitlab-ci.yml 和 vue.config.js 文件。GitLab CI 的管道將會(huì)被觸發(fā): 當(dāng)成功時(shí)候, 到 Settings > Pages 查看關(guān)于網(wǎng)站的鏈接。

Netlify

在 Netlify 上，使用以下設(shè)置從 GitHub 創(chuàng)建新項(xiàng)目:構(gòu)建命令: npm run build 或 yarn build發(fā)布目錄: dist
點(diǎn)擊“deploy”按鈕！

也可以查看 vue-cli-plugin-netlify-lambda。

如果使用 Vue Router 的 history 模式，你需要在 /public 目錄下創(chuàng)建一個(gè) _redirects 文件：

# 單頁(yè)應(yīng)用的 Netlify 設(shè)置
/*    /index.html   200

詳細(xì)信息請(qǐng)查看 Netlify 重定向文檔。

Render

Render 提供帶有全托管 SSL，全球 CDN 和 GitHub 持續(xù)自動(dòng)部署的免費(fèi)靜態(tài)站點(diǎn)托管服務(wù)。

在 Render 上創(chuàng)建一個(gè)新的 Web Service，并授予 Render 的 GitHub 應(yīng)用訪問你的 Vue 倉(cāng)庫(kù)的權(quán)限。
在創(chuàng)建過程中使用以下設(shè)置：環(huán)境：Static Site構(gòu)建命令：npm run build 或者 yarn build發(fā)布目錄：dist

大功告成！構(gòu)建結(jié)束時(shí)你的應(yīng)用便會(huì)在你的 Render URL 上線。

如果使用 Vue Router 的 history 模式，你需要在站點(diǎn)的 Redirects/Rewrites 設(shè)置中添加以下改寫規(guī)則：

Source: /*
Destination: /index.html
Status: Rewrite

詳細(xì)信息請(qǐng)查看 Render 的重定向和改寫及自定義域名文檔。

Amazon S3

參見 vue-cli-plugin-s3-deploy。

Firebase

創(chuàng)建一個(gè)新的 Firebase 項(xiàng)目 Firebase console。請(qǐng)參考文檔。

確保已經(jīng)全局安裝了 firebase-tools ：

npm install -g firebase-tools

在項(xiàng)目的根目錄下, 用以下命令初始化 firebase ：

firebase init

Firebase 將會(huì)詢問有關(guān)初始化項(xiàng)目的一些問題。

選擇需要 Firebase CLI 的功能。一定要選擇 hosting 。
選擇默認(rèn)的 Firebase 項(xiàng)目。
將 public 目錄設(shè)為 dist (或構(gòu)建輸出的位置) 這將會(huì)上傳到 Firebase Hosting。

// firebase.json

{
  "hosting": {
    "public": "dist"
  }
}

選擇 yes 設(shè)置項(xiàng)目為一個(gè)單頁(yè)應(yīng)用。這將會(huì)創(chuàng)建一個(gè) index.html 在 dist 文件夾并且配置 hosting 信息。

// firebase.json

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

執(zhí)行 npm run build 去構(gòu)建項(xiàng)目。

在 Firebase Hosting 部署項(xiàng)目，執(zhí)行以下命令：

firebase deploy --only hosting

如果需要在部署的項(xiàng)目中使用的其他 Firebase CLI 功能，執(zhí)行 firebase deploy 去掉 --only 參數(shù)。

現(xiàn)在可以到 https://<YOUR-PROJECT-ID>.firebaseapp.com 訪問你的項(xiàng)目了。

請(qǐng)參考 Firebase 文檔來獲取更多細(xì)節(jié)。

ZEIT Now

ZEIT Now 是一個(gè)網(wǎng)站和無服務(wù)器 (Serverless) API 云平臺(tái)，你可以使用你的個(gè)人域名 (或是免費(fèi)的 .now.sh URL) 部署你的 Vue 項(xiàng)目。

步驟一：安裝 Now CLI

要使用 npm 安裝其命令行界面，運(yùn)行以下命令：

npm install -g now

步驟二：部署

在項(xiàng)目根目錄運(yùn)行以下命令部署你的應(yīng)用：

now

此外，你還可以使用他們的 GitHub 或 GitLab 集成服務(wù)。

大功告成！

你的站點(diǎn)會(huì)開始部署，你將獲得一個(gè)形如 https://vue.now-examples.now.sh/ 的鏈接。

開箱即用地，請(qǐng)求會(huì)被自動(dòng)改寫到 index.html (除了自定義的靜態(tài)文件) 并帶有合適的緩存請(qǐng)求頭。你可以改寫這些規(guī)則。

Stdlib

未完成 | 歡迎參與貢獻(xiàn)。

Heroku

安裝 Heroku CLI
創(chuàng)建 static.json 文件：{ "root": "dist", "clean_urls": true, "routes": { "/**": "index.html" } }
將 static.json 加入 Gitgit add static.json git commit -m "add static configuration"
部署到 Herokuheroku login heroku create heroku buildpacks:add heroku/nodejs heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static git push heroku master

詳細(xì)信息：https://gist.github.com/hone/24b06869b4c1eca701f9

Surge

要使用 Surge 進(jìn)行部署，步驟非常簡(jiǎn)單。

首先，通過運(yùn)行 npm run build 來構(gòu)建項(xiàng)目。如果還沒有安裝 Surge 的命令行工具，可以通過運(yùn)行命令來執(zhí)行此操作：

npm install --global surge

然后 cd 進(jìn)入項(xiàng)目的 dist/ 文件夾，然后運(yùn)行 surge 并按照屏幕提示操作。如果是第一次使用 Surge，它會(huì)要求設(shè)置電子郵件和密碼。確認(rèn)項(xiàng)目文件夾以及輸入首選域來查看正在部署的項(xiàng)目，如下所示。

            project: /Users/user/Documents/myawesomeproject/dist/
         domain: myawesomeproject.surge.sh
         upload: [====================] 100% eta: 0.0s (31 files, 494256 bytes)
            CDN: [====================] 100%
             IP: **.**.***.***

   Success! - Published to myawesomeproject.surge.sh

通過訪問 myawesomeproject.surge.sh 來確保你的項(xiàng)目已經(jīng)成功的用 Surge 發(fā)布，有關(guān)自定義域名等更多設(shè)置詳細(xì)信息，可以到 Surge's help page 查看。

Bitbucket Cloud

如 Bitbucket 文檔創(chuàng)建一個(gè)命名為 <USERNAME>.bitbucket.io 的倉(cāng)庫(kù)。
如果你想擁有多個(gè)網(wǎng)站，想要發(fā)布到主倉(cāng)庫(kù)的子文件夾中。這種情況下就要在 vue.config.js 設(shè)置 publicPath。如果部署到 https://<USERNAME>.bitbucket.io/， publicPath 默認(rèn)將被設(shè)為 "/"，你可以選擇忽略它。如果要部署到 https://<USERNAME>.bitbucket.io/<SUBFOLDER>/，設(shè)置 publicPath 為 "/<SUBFOLDER>/"。在這種情況下，倉(cāng)庫(kù)的目錄結(jié)構(gòu)應(yīng)該反映 url 結(jié)構(gòu)，例如倉(cāng)庫(kù)應(yīng)該有 /<SUBFOLDER> 目錄。
在項(xiàng)目中， deploy.sh 使用以下內(nèi)容創(chuàng)建并運(yùn)行它以進(jìn)行部署： #!/usr/bin/env sh # 當(dāng)發(fā)生錯(cuò)誤時(shí)中止腳本 set -e # 構(gòu)建 npm run build # cd 到構(gòu)建輸出的目錄 cd dist git init git add -A git commit -m 'deploy' git push -f git@bitbucket.org:<USERNAME>/<USERNAME>.bitbucket.io.git master cd -

Docker (Nginx)

在 Docker 容器中使用 Nginx 部署你的應(yīng)用。

安裝 Docker
在項(xiàng)目根目錄創(chuàng)建 Dockerfile 文件FROM node:10 COPY ./ /app WORKDIR /app RUN npm install && npm run build FROM nginx RUN mkdir /app COPY --from=0 /app/dist /app COPY nginx.conf /etc/nginx/nginx.conf
在項(xiàng)目根目錄創(chuàng)建 .dockerignore 文件設(shè)置 .dockerignore 文件能防止 node_modules 和其他中間構(gòu)建產(chǎn)物被復(fù)制到鏡像中導(dǎo)致構(gòu)建問題。**/node_modules **/dist
在項(xiàng)目根目錄創(chuàng)建 nginx.conf 文件Nginx 是一個(gè)能在 Docker 容器中運(yùn)行的 HTTP(s) 服務(wù)器。它使用配置文件決定如何提供內(nèi)容、要監(jiān)聽的端口等。參閱 Nginx 設(shè)置文檔以了解所有可能的設(shè)置選項(xiàng)。下面是一個(gè)簡(jiǎn)單的 Nginx 設(shè)置文件，它會(huì)在 80 端口上提供你的 Vue 項(xiàng)目。頁(yè)面未找到 / 404 錯(cuò)誤使用的是 index.html，這讓我們可以使用基于 pushState() 的路由。user nginx; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; location / { root /app; index index.html; try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } } }
構(gòu)建你的 Docker 鏡像docker build . -t my-app # Sending build context to Docker daemon 884.7kB # ... # Successfully built 4b00e5ee82ae # Successfully tagged my-app:latest
運(yùn)行你的 Docker 鏡像這個(gè)例子基于官方 Nginx 鏡像，因此已經(jīng)設(shè)置了日志重定向并關(guān)閉了自我守護(hù)進(jìn)程。它也提供了其他有利于 Nginx 在 Docker 容器中運(yùn)行的默認(rèn)設(shè)置。更多信息參閱 Nginx Docker 倉(cāng)庫(kù)。docker run -d -p 8080:80 my-app curl localhost:8080 # <!DOCTYPE html><html lang=en>...</html>

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

← Vue CLI 構(gòu)建目標(biāo)

Vue CLI vue.config.js 配置參考 →

寫筆記

我要補(bǔ)充