Vue CLI 部署

2020-03-13 15:10 更新

通用指南

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

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

本地預覽

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

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

使用 history.pushState 的路由

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

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

CORS

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

PWA

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

平臺指南

GitHub Pages

手動推送更新

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

  1. 仿照上面在 vue.config.js 中設置正確的 publicPath。
  2. 安裝 Travis CLI 客戶端：gem install travis && travis --login
  3. 生成一個擁有“repo”權限的 GitHub 訪問令牌。
  4. 授予 Travis 訪問倉庫的權限：travis set GITHUB_TOKEN=xxx (xxx 是第三步中的個人訪問令牌)
  5. 在項目根目錄下創(chuàng)建一個 .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
  6. 將 .travis.yml 文件推送到倉庫來觸發(fā)第一次構建。

GitLab Pages

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

# .gitlab-ci.yml 文件應放在你倉庫的根目錄下 

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

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

// vue.config.js 位于倉庫的根目錄下
// 確保用 GitLab 項目的名稱替換了 `YourProjectName`

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

請閱讀在 GitLab Pages domains 的文檔來學習更多關于頁面部署 URL 的信息。注意，你也可以使用自定義域名。

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

Netlify

  1. 在 Netlify 上，使用以下設置從 GitHub 創(chuàng)建新項目:構建命令: npm run build 或 yarn build發(fā)布目錄: dist
  2. 點擊“deploy”按鈕！

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

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

# 單頁應用的 Netlify 設置
/*    /index.html   200

詳細信息請查看 Netlify 重定向文檔。

Render

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

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

大功告成！構建結束時你的應用便會在你的 Render URL 上線。

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

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

詳細信息請查看 Render 的重定向和改寫及自定義域名文檔。

Amazon S3

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

Firebase

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

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

npm install -g firebase-tools

在項目的根目錄下, 用以下命令初始化 firebase ：

firebase init

Firebase 將會詢問有關初始化項目的一些問題。

  • 選擇需要 Firebase CLI 的功能。 一定要選擇 hosting 。
  • 選擇默認的 Firebase 項目。
  • 將 public 目錄設為 dist (或構建輸出的位置) 這將會上傳到 Firebase Hosting。
// firebase.json

{
  "hosting": {
    "public": "dist"
  }
}
  • 選擇 yes 設置項目為一個單頁應用。 這將會創(chuàng)建一個 index.html 在 dist 文件夾并且配置 hosting 信息。
// firebase.json

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

執(zhí)行 npm run build 去構建項目。

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

firebase deploy --only hosting

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

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

請參考 Firebase 文檔 來獲取更多細節(jié)。

ZEIT Now

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

步驟一：安裝 Now CLI

要使用 npm 安裝其命令行界面，運行以下命令：

npm install -g now

步驟二：部署

在項目根目錄運行以下命令部署你的應用：

now

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

大功告成！

你的站點會開始部署，你將獲得一個形如 https://vue.now-examples.now.sh/ 的鏈接。

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

Stdlib

未完成 | 歡迎參與貢獻。

Heroku

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

詳細信息：https://gist.github.com/hone/24b06869b4c1eca701f9

Surge

要使用 Surge 進行部署，步驟非常簡單。

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

npm install --global surge

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

            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 來確保你的項目已經(jīng)成功的用 Surge 發(fā)布，有關自定義域名等更多設置詳細信息，可以到 Surge's help page 查看。

Bitbucket Cloud

  1. 如 Bitbucket 文檔 創(chuàng)建一個命名為 <USERNAME>.bitbucket.io 的倉庫。
  2. 如果你想擁有多個網(wǎng)站， 想要發(fā)布到主倉庫的子文件夾中。這種情況下就要在 vue.config.js 設置 publicPath。如果部署到 https://<USERNAME>.bitbucket.io/， publicPath 默認將被設為 "/"，你可以選擇忽略它。如果要部署到 https://<USERNAME>.bitbucket.io/<SUBFOLDER>/，設置 publicPath 為 "/<SUBFOLDER>/"。在這種情況下，倉庫的目錄結構應該反映 url 結構，例如倉庫應該有 /<SUBFOLDER> 目錄。
  3. 在項目中， deploy.sh 使用以下內容創(chuàng)建并運行它以進行部署： #!/usr/bin/env sh # 當發(fā)生錯誤時中止腳本 set -e # 構建 npm run build # cd 到構建輸出的目錄 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 部署你的應用。

  1. 安裝 Docker
  2. 在項目根目錄創(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
  3. 在項目根目錄創(chuàng)建 .dockerignore 文件設置 .dockerignore 文件能防止 node_modules 和其他中間構建產(chǎn)物被復制到鏡像中導致構建問題。**/node_modules **/dist
  4. 在項目根目錄創(chuàng)建 nginx.conf 文件Nginx 是一個能在 Docker 容器中運行的 HTTP(s) 服務器。它使用配置文件決定如何提供內容、要監(jiān)聽的端口等。參閱 Nginx 設置文檔 以了解所有可能的設置選項。下面是一個簡單的 Nginx 設置文件，它會在 80 端口上提供你的 Vue 項目。頁面未找到 / 404 錯誤使用的是 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; } } }
  5. 構建你的 Docker 鏡像docker build . -t my-app # Sending build context to Docker daemon 884.7kB # ... # Successfully built 4b00e5ee82ae # Successfully tagged my-app:latest
  6. 運行你的 Docker 鏡像這個例子基于官方 Nginx 鏡像，因此已經(jīng)設置了日志重定向并關閉了自我守護進程。它也提供了其他有利于 Nginx 在 Docker 容器中運行的默認設置。更多信息參閱 Nginx Docker 倉庫。docker run -d -p 8080:80 my-app curl localhost:8080 # <!DOCTYPE html><html lang=en>...</html>


以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號