Vue CLI 部署
通用指南
如果你用 Vue CLI 處理靜態(tài)資源并和后端框架一起作為部署的一部分，那么你需要的僅僅是確保 Vue CLI 生成的構(gòu)建文件在正確的位置，并遵循后端框架的發(fā)布方式即可。
如果你獨(dú)立于后端部署前端應(yīng)用——也就是說(shuō)后端暴露一個(gè)前端可訪問(wèn)的 API，然后前端實(shí)際上是純靜態(tài)應(yīng)用。那么你可以將 dist 目錄里構(gòu)建的內(nèi)容部署到任何靜態(tài)文件服務(wù)器中，但要確保正確的 publicPath。
本地預(yù)覽
dist 目錄需要啟動(dòng)一個(gè) HTTP 服務(wù)器來(lái)訪問(wèn) (除非你已經(jīng)將 publicPath 配置為了一個(gè)相對(duì)的值)，所以以 file:// 協(xié)議直接打開(kāi) 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ì)處理即將提到的路由問(wèn)題
serve -s dist
使用 history.pushState 的路由
如果你在 history 模式下使用 Vue Router，是無(wú)法搭配簡(jiǎn)單的靜態(tài)文件服務(wù)器的。例如，如果你使用 Vue Router 為 /todos/42/ 定義了一個(gè)路由，開(kāi)發(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è)問(wèn)題，你需要配置生產(chǎn)環(huán)境服務(wù)器，將任何沒(méi)有匹配到靜態(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 客戶(hù)端：gem install travis && travis --login
- 生成一個(gè)擁有“repo”權(quán)限的 GitHub 訪問(wèn)令牌。
- 授予 Travis 訪問(wèn)倉(cāng)庫(kù)的權(quán)限：travis set GITHUB_TOKEN=xxx (xxx 是第三步中的個(gè)人訪問(wèn)令牌)
- 在項(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ù)來(lái)觸發(fā)第一次構(gòu)建。
GitLab Pages
根據(jù) GitLab Pages 文檔的描述，所有的配置都在根目錄中的.gitlab-ci.yml 文件中。下面的范例是一個(gè)很好的入門(mén):
# .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)目的名稱(chēng)替換了 `YourProjectName`
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/yourProjectName/'
: '/'
}
請(qǐng)閱讀在 GitLab Pages domains 的文檔來(lái)學(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)用訪問(wèn)你的 Vue 倉(cāng)庫(kù)的權(quán)限。
- 在創(chuàng)建過(guò)程中使用以下設(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è)置中添加以下改寫(xiě)規(guī)則：
- Source: /*
- Destination: /index.html
- Status: Rewrite
詳細(xì)信息請(qǐng)查看 Render 的重定向和改寫(xiě)及自定義域名文檔。
Amazon S3
參見(jiàn) 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ì)詢(xún)問(wèn)有關(guān)初始化項(xiàng)目的一些問(wèn)題。
- 選擇需要 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 訪問(wèn)你的項(xiàng)目了。
請(qǐng)參考 Firebase 文檔 來(lái)獲取更多細(xì)節(jié)。
ZEIT Now
ZEIT Now 是一個(gè)網(wǎng)站和無(wú)服務(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ì)開(kāi)始部署，你將獲得一個(gè)形如 https://vue.now-examples.now.sh/ 的鏈接。
開(kāi)箱即用地，請(qǐng)求會(huì)被自動(dòng)改寫(xiě)到 index.html (除了自定義的靜態(tài)文件) 并帶有合適的緩存請(qǐng)求頭。你可以改寫(xiě)這些規(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)單。
首先，通過(guò)運(yùn)行 npm run build 來(lái)構(gòu)建項(xiàng)目。如果還沒(méi)有安裝 Surge 的命令行工具，可以通過(guò)運(yùn)行命令來(lái)執(zhí)行此操作：
npm install --global surge
然后 cd 進(jìn)入項(xiàng)目的 dist/ 文件夾，然后運(yùn)行 surge 并按照屏幕提示操作 。如果是第一次使用 Surge，它會(huì)要求設(shè)置電子郵件和密碼。確認(rèn)項(xiàng)目文件夾以及輸入首選域來(lái)查看正在部署的項(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
通過(guò)訪問(wèn) myawesomeproject.surge.sh 來(lái)確保你的項(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)建問(wèn)題。**/node_modules **/dist
- 在項(xiàng)目根目錄創(chuàng)建 nginx.conf 文件Nginx 是一個(gè)能在 Docker 容器中運(yùn)行的 HTTP(s) 服務(wù)器。它使用配置文件決定如何提供內(nèi)容、要監(jiān)聽(tīng)的端口等。參閱 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>
更多建議：