2. 程式人生 > 實用技巧 >VUE部署

VUE部署

阿新 • • 發佈：2020-08-03

通用指南

如果你用 Vue CLI 處理靜態資源並和後端框架一起作為部署的一部分，那麼你需要的僅僅是確保 Vue CLI 生成的構建檔案在正確的位置，並遵循後端框架的釋出方式即可。

如果你獨立於後端部署前端應用——也就是說後端暴露一個前端可訪問的 API，然後前端實際上是純靜態應用。那麼你可以將dist目錄裡構建的內容部署到任何靜態檔案伺服器中，但要確保正確的publicPath。

#本地預覽

dist目錄需要啟動一個 HTTP 伺服器來訪問 (除非你已經將publicPath配置為了一個相對的值)，所以以file://協議直接開啟dist/index.html是不會工作的。在本地預覽生產環境構建最簡單的方式就是使用一個 Node.js 靜態檔案伺服器，例如

serve：

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

#使用history.pushState的路由

如果你在history模式下使用 Vue Router，是無法搭配簡單的靜態檔案伺服器的。例如，如果你使用 Vue Router 為/todos/42/定義了一個路由，開發伺服器已經配置了相應的localhost:3000/todos/42響應，但是一個為生產環境構建架設的簡單的靜態伺服器會卻會返回 404。

為了解決這個問題，你需要配置生產環境伺服器，將任何沒有匹配到靜態檔案的請求回退到index.html

。Vue Router 的文件提供了常用伺服器配置指引。

#CORS

如果前端靜態內容是部署在與後端 API 不同的域名上，你需要適當地配置CORS。

#PWA

如果你使用了 PWA 外掛，那麼應用必須架設在 HTTPS 上，這樣Service Worker才能被正確註冊。

#平臺指南

#GitHub Pages

#手動推送更新

  1. 在vue.config.js中設定正確的publicPath。

    如果打算將專案部署到https://<USERNAME>.github.io/上,publicPath將預設被設為"/"，你可以忽略這個引數。

    如果打算將專案部署到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. 在專案目錄下，建立內容如下的deploy.sh(可以適當地取消註釋) 並執行它以進行部署：
























    #!/usr/bin/env sh

# 當發生錯誤時中止指令碼
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 [email protected]:<USERNAME>/<USERNAME>.github.io.git master

# 部署到 https://<USERNAME>.github.io/<REPO>
# git push -f [email protected]:<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. 在專案根目錄下建立一個.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檔案推送到倉庫來觸發第一次構建。

#GitLab Pages

根據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

通常, 你的靜態頁面將託管在 https://yourUserName.gitlab.io/yourProjectName 上, 所以你可以建立一個 initialvue.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 的管道將會被觸發: 當成功時候, 到Settings > Pages檢視關於網站的連結。

#Netlify

  1. 在 Netlify 上，使用以下設定從 GitHub 建立新專案:

    • 構建命令:npm run build或yarn build
    • 釋出目錄:dist

  2. 點選“deploy”按鈕！

也可以檢視vue-cli-plugin-netlify-lambda。

如果使用 Vue Router 的 history 模式，你需要在/public目錄下建立一個_redirects檔案：

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

詳細資訊請檢視Netlify 重定向文件。

#Render

Render提供帶有全託管 SSL，全球 CDN 和 GitHub 持續自動部署的免費靜態站點託管服務。

  1. 在 Render 上建立一個新的 Web Service，並授予 Render 的 GitHub 應用訪問你的 Vue 倉庫的許可權。
  2. 在建立過程中使用以下設定：
    • 環境：Static Site
    • 構建命令：npm run build或者yarn build
    • 釋出目錄：dist

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

如果使用 Vue Router 的 history 模式，你需要在站點的Redirects/Rewrites設定中新增以下改寫規則：

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

詳細資訊請檢視 Render 的重定向和改寫及自定義域名文件。

#Amazon S3

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

#Firebase

建立一個新的 Firebase 專案Firebase console。 請參考文件。

確保已經全域性安裝了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設定專案為一個單頁應用。 這將會建立一個index.html在dist資料夾並且配置hosting資訊。
// firebase.json

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

執行npm run build去構建專案。

在Firebase Hosting部署專案，執行以下命令 ：

firebase deploy --only hosting

如果需要在部署的專案中使用的其他 Firebase CLI 功能， 執行firebase deploy去掉--only引數。

現在可以到https://<YOUR-PROJECT-ID>.firebaseapp.com訪問你的專案了。

請參考Firebase 文件來獲取更多細節。

#ZEIT Now

ZEIT Now是一個網站和無伺服器 (Serverless) API 雲平臺，你可以使用你的個人域名 (或是免費的.now.shURL) 部署你的 Vue 專案。

#步驟一：安裝 Now CLI

要使用npm安裝其命令列介面，執行以下命令：

npm install -g now

#步驟二：部署

在專案根目錄執行以下命令部署你的應用：

now

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

大功告成！

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

開箱即用地，請求會被自動改寫到index.html(除了自定義的靜態檔案) 並帶有合適的快取請求頭。

#Stdlib

未完成 | 歡迎參與貢獻。

#Heroku

  1. 安裝 Heroku CLI

  2. 建立static.json檔案：

    {
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

  3. 將static.json加入 Git

    git add static.json
git commit -m "add static configuration"

  4. 部署到 Heroku

    heroku 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 的命令列工具，可以通過執行命令來執行此操作：

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來確保你的專案已經成功的用 Surge 釋出，有關自定義域名等更多設定詳細資訊，可以到Surge's help page檢視。

#Bitbucket Cloud

  1. 如Bitbucket 文件建立一個命名為<USERNAME>.bitbucket.io的倉庫。

  2. 如果你想擁有多個網站， 想要釋出到主倉庫的子資料夾中。這種情況下就要在vue.config.js設定publicPath。

    如果部署到https://<USERNAME>.bitbucket.io/，publicPath預設將被設為"/"，你可以選擇忽略它。

    如果要部署到https://<USERNAME>.bitbucket.io/<SUBFOLDER>/，設定publicPath為"/<SUBFOLDER>/"。在這種情況下，倉庫的目錄結構應該反映 url 結構，例如倉庫應該有/<SUBFOLDER>目錄。

  3. 在專案中，deploy.sh使用以下內容建立並執行它以進行部署：



















    #!/usr/bin/env sh

# 當發生錯誤時中止指令碼
set -e

# 構建
npm run build

# cd 到構建輸出的目錄
cd dist

git init
git add -A
git commit -m 'deploy'

git push -f [email protected]:<USERNAME>/<USERNAME>.bitbucket.io.git master

cd -

#Docker (Nginx)

在 Docker 容器中使用 Nginx 部署你的應用。

  1. 安裝Docker

  2. 在專案根目錄建立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. 在專案根目錄建立.dockerignore檔案

    設定.dockerignore檔案能防止node_modules和其他中間構建產物被複制到映象中導致構建問題。

    **/node_modules
**/dist

  4. 在專案根目錄建立nginx.conf檔案

    Nginx是一個能在 Docker 容器中執行的 HTTP(s) 伺服器。它使用配置檔案決定如何提供內容、要監聽的埠等。參閱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映象，因此已經設定了日誌重定向並關閉了自我守護程序。它也提供了其他有利於 Nginx 在 Docker 容器中執行的預設設定。更多資訊參閱Nginx Docker 倉庫。

    docker run -d -p 8080:80 my-app
curl localhost:8080
# <!DOCTYPE html><html lang=en>...</html>



    https://cli.vuejs.org/zh/guide/deployment.html#docker-nginx

相關推薦

springboot+vue部署按照及執行方法

1 環境部署 1.1 jdk-8u111-windows-x64 環境變數 JAVA_HOME:C:\\Program Files\\Java\\jdk1.8.0_111 Path新增一行:%JAVA_HOME%\\bin

VUE部署

通用指南 如果你用 Vue CLI 處理靜態資源並和後端框架一起作為部署的一部分，那麼你需要的僅僅是確保 Vue CLI 生成的構建檔案在正確的位置，並遵循後端框架的釋出方式即可。

vue部署伺服器nginx代理配置刪除多餘/api部分

vue部署伺服器後，請求地址統一配置加了‘/api’字首 要訪問三方介面地址：http://10.10.10.25:8080/IntellLinkPf/GetChainSummary

django+nginx+uwsgi+vue部署伺服器

1. 安裝虛擬環境 2. 安裝專案所需要依賴的包 sudo pip3 freeze > requirements.txt pip3 install -r requirements.txt

你不知道的SpringBoot與Vue部署解決方案

前言 前段時間公司外網部署的演示環境全部轉到內網環境中去，所有對外演示的環境都需要申請外網對映才能訪問某個服務。我用一個外網地址 www.a.com 對映到一個內網地址 http://ip:port ，然後在這個地址 http://ip:p

springboot+vue部署到阿里雲伺服器（從零開始到部署完成，包含JDK的安裝、Nginx做前端伺服器以及Nginx配置、自啟、後端專案自啟）

技術標籤：伺服器框架nginx伺服器阿里雲專案部署springboot+vue 由於最近這兩天沒有什麼事情，經理讓我把目前正在寫的專案（半成品）部署到線上，由於本人還是菜鳥一枚，之前也沒接觸過，所以也是網上查資料從零

ubuntu-django+vue部署

資源準備 vue專案資源打包dist（js、css、html、img） django專案依賴檔案，pipreqs（通常專案開發使用獨立的虛擬環境，避免環境互相汙染）（可能有些包會收集不到，還有一些像uwsgi包本地開發用不到，需要手動新增

vue 部署 Linux Debian 11 Nginx

上一篇地址： https://www.cnblogs.com/piaoxuewuming/p/15574502.html 上一篇我寫了部署webapi 這一篇來部署VUE前端介面

簡單使用 持續整合jenkins 快速部署springboot和vue專案(面向開發者)

1-前言 作為個人開發者,往往想把springboot專案部署到伺服器總要經過一些很麻煩的步驟,比如springboot專案要在本地編譯打包成jar包,然後上傳jar包檔案到伺服器,再然後使用一些命令去啟動這個jar包,這樣你每修改一

docker-compose部署全棧專案（vue+node.js+mongodb）

第一次投稿，寫這篇文章主要是記錄自己這周從0開始學習docker到部署專案。 image：應用程式及其依賴，打包在 image 檔案裡面。可以想象成一個類。

docker-compose 部署 Vue+SpringBoot 前後端分離專案

一、前言 本文將通過docker-compose來部署前端Vue專案到Nginx中，和執行後端SpringBoot專案

nginx反向代理、負載均衡配置及vue專案部署

nginx配置檔案結構 Nginx的配置檔案是一個純文字檔案，它一般位於Nginx安裝目錄的conf目錄下，整個配置檔案是以block的形式組織的。每個block一般以一個大括號“{”來表示。block可以分為幾個層次，整個配置檔案中Ma

全棧式部署：SpringCloud 微服務+Docker + Vue + nginx 前後端一站式部署

本文將帶大家從一臺全新的 CentOS 伺服器開始，部署一套完整的前後端分離專案。操作步驟非常詳細，新手友好型文章~

Vue前端專案部署IIS的實現

背景：最近用vue寫了個demo(不涉及呼叫後臺資料)，為了給銷售團隊更好的給客戶講述產品的一些特點及大體的感官認識。需要將自己做的專案安裝到他們的筆記本上面去，作為一個銷售人員來說，他不會知道例如vue中的npm

vue專案打包之開發環境和部署環境的實現

專案開發階段和生產環境可能不一樣 如前端在開發階段，介面可能是自己使用 node.js 搭建的伺服器，API 返回的也都是假資料，等後臺介面開發好後，再切換成後臺提供的介面，等測試沒有問題，服務端上線後，又要改成正

ASP.NET Core WebApi+Vue前後端分離的iis部署

　　隨著ASP.NET Core的日益完善，本人也想把他用於日後的生成環境中，所以現在自己的學習專案中體驗了一把，專案採用的是ASP.NET Core WebApi+Vue+element開發的一個後臺管理系統。平時執行的時候都是通過vs啟動 II

vue + ArcGIS 地圖應用系列一：arcgis api本地部署(開發環境)

封面 1.下載 ArcGIS API for JavaScript 官網地址： https://developers.arcgis.com/javascript/3/

部署vue+Springboot前後端分離專案的步驟實現

單頁應用 vue經常被用來開發單頁應用（SinglePage Web Application，SPA）,什麼叫做單頁應用呢，也就是隻有一張web頁面的應用，單頁應用的跳轉只需要重新整理區域性資源，大大加快的了我們頁面的響應速度

windows平臺部署.netcore和vue專案

一，NetCore後臺介面部署1，在後臺釋出包中找到“appsettings.json”檔案並用記事本開啟，根據當前要連線的資料庫型別啟用相應的資料庫型別配置（啟用“oracleAMSContext”還是“mysqlAMSC

淺談Vue 自動化部署打包上線

應用場景 專案打包後釋出到正式環境，需要後端配合或者前端自己上傳到伺服器上，操作不便且容易產生問題，比如後臺不在的情況而前臺沒有伺服器的資訊，這時釋出就被延；或者前端自己上傳容易導致誤操作，如果上傳錯地