⚠️ Vue CLI 处于维护模式！

对于新项目，现在建议使用 create-vue 来搭建基于 Vite 的项目。还可以参考 Vue 3 工具指南获取最新建议。

部署

一般指南

如果您使用 Vue CLI 以及处理静态资源作为其部署一部分的后端框架，您只需要确保 Vue CLI 在正确的位置生成构建文件，然后按照后端框架的部署说明进行操作。

如果您独立于后端开发前端应用程序 - 也就是说，您的后端为您的前端提供 API 以进行通信，那么您的前端本质上是一个纯粹的静态应用程序。您可以将构建的内容部署到 dist 目录中的任何静态文件服务器，但请确保设置正确的 publicPath。

本地预览

dist 目录旨在由 HTTP 服务器提供服务（除非您已将 publicPath 配置为相对值），因此如果您直接通过 file:// 协议打开 dist/index.html，它将无法正常工作。本地预览生产构建的最简单方法是使用 Node.js 静态文件服务器，例如 serve

npm install -g serve
# -s flag means serve it in Single-Page Application mode
# which deals with the routing problem below
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

手动推送更新

在 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 应该如下所示
```
// vue.config.js file to be placed in the root of your repository

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-project/'
    : '/'
}
```

在您的项目中，创建 deploy.sh，内容如下（突出显示的行已适当取消注释），并运行它进行部署

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

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

# if you are deploying to https://<USERNAME>.github.io
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git main

# if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f [email protected]:<USERNAME>/<REPO>.git main:gh-pages

cd -

使用 Travis CI 进行自动更新

如上所述，在 vue.config.js 中设置正确的 publicPath。
安装 Travis CLI 客户端：gem install travis && travis --login
生成 GitHub 访问令牌，并授予其仓库权限。
授予 Travis 作业访问您的存储库的权限：travis env set GITHUB_TOKEN xxx（xxx 是步骤 3 中的个人访问令牌。）

在项目的根目录中创建 .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: main

将 .travis.yml 文件推送到您的存储库以触发第一次构建。

GitLab Pages

如 GitLab Pages 文档所述，所有操作都通过放置在存储库根目录中的 .gitlab-ci.yml 文件完成。此工作示例将帮助您入门

# .gitlab-ci.yml file to be placed in the root of your repository

pages: # the job must be named pages
  image: node:latest
  stage: deploy
  script:
    - npm ci
    - npm run build
    - mv public public-vue # GitLab Pages hooks on the public folder
    - mv dist public # rename the dist folder (result of npm run build)
    # optionally, you can activate gzip support with the following line:
    - find public -type f -regex '.*\.\(htm\|html\|txt\|text\|js\|css\)$' -exec gzip -f -k {} \;
  artifacts:
    paths:
      - public # artifact path must be /public for GitLab Pages to pick it up
  only:
    - master

通常，您的静态网站将托管在 https://yourUserName.gitlab.io/yourProjectName 上，因此您还需要创建一个初始 vue.config.js 文件以更新 BASE_URL 值以匹配您的项目名称（CI_PROJECT_NAME 环境变量包含此值）

// vue.config.js file to be placed in the root of your repository

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

有关托管项目网站的 URL 的更多信息，请阅读有关 GitLab Pages 域的文档。请注意，您还可以使用自定义域。

在推送到您的存储库之前，请提交 .gitlab-ci.yml 和 vue.config.js 文件。将触发 GitLab CI 管道：成功后，访问您的项目的 设置 > Pages 以查看您的网站链接，然后单击它。

Netlify

在 Netlify 上，从 GitHub 设置一个新项目，设置如下
- 构建命令：npm run build 或 yarn build
- 发布目录：dist
点击部署按钮！

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

在 Vue Router 上使用 history 模式

为了在 Vue Router 中使用 `history 模式` 接收直接访问，你需要将所有流量重定向到 `index.html` 文件。

有关更多信息，请参阅 Netlify 重定向文档。

替代方法

在 `public` 目录下创建一个名为 `_redirects` 的文件，内容如下

# Netlify settings for single-page application
/*    /index.html   200

如果你正在使用 @vue/cli-plugin-pwa，请确保将 `_redirects` 文件从服务工作者的缓存中排除。为此，请将以下内容添加到你的 `vue.config.js` 中

// vue.config.js file to be placed in the root of your repository

module.exports = {
  pwa: {
      workboxOptions: {
        exclude: [/_redirects/]
      }
    }
}

查看 workboxOptions 和 exclude 以了解更多信息。

渲染

Render 提供免费的静态网站托管，包括完全托管的 SSL、全球 CDN 和来自 GitHub 的持续自动部署。

在 Render 上创建一个新的静态网站，并授予 Render 的 GitHub 应用访问你的 Vue 仓库的权限。
在创建过程中使用以下值
- 构建命令：npm run build 或 yarn build
- 发布目录：dist

就是这样！你的应用将在构建完成后立即在你的 Render URL 上上线。

为了在 Vue Router 中使用 `history 模式` 接收直接访问，你需要在你的网站的 `Redirects/Rewrites` 选项卡中添加以下重写规则。

源： /*
目标： /index.html
状态 Rewrite

了解有关在 Render 上设置重定向、重写和自定义域名的更多信息。

Amazon S3

请参阅 vue-cli-plugin-s3-deploy。

Firebase

在你的 Firebase 控制台上创建一个新的 Firebase 项目。请参阅此文档，了解如何设置你的项目。

确保你已全局安装 firebase-tools

npm install -g firebase-tools

从你的项目根目录开始，使用以下命令初始化 `firebase`

firebase init

Firebase 会询问一些有关如何设置你的项目的问题。

选择要使用哪些 Firebase CLI 功能来设置你的项目。确保选择 `hosting`。
为你的项目选择默认的 Firebase 项目。
将你的 `public` 目录设置为 `dist`（或你的构建输出所在的目录），该目录将上传到 Firebase 托管。

// firebase.json

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

选择 `yes` 将你的项目配置为单页应用程序。这将在你的 `dist` 文件夹中创建一个 `index.html` 文件，并配置你的 `hosting` 信息。

// firebase.json

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

运行 `npm run build` 来构建你的项目。

要在 Firebase 托管上部署你的项目，请运行以下命令

firebase deploy --only hosting

如果你想部署项目中使用的其他 Firebase CLI 功能，请运行 `firebase deploy`，不要使用 `--only` 选项。

你现在可以在 `https://<YOUR-PROJECT-ID>.firebaseapp.com` 或 `https://<YOUR-PROJECT-ID>.web.app` 上访问你的项目。

请参阅 Firebase 文档以了解更多详细信息。

Vercel

Vercel 是一个云平台，使开发人员能够托管 Jamstack 网站和 Web 服务，这些网站和 Web 服务可以立即部署、自动扩展，并且无需任何监督，所有这些都无需任何配置。它们提供全球边缘网络、SSL 加密、资产压缩、缓存失效等等。

步骤 1：将你的 Vue 项目部署到 Vercel

要使用 Vercel for Git 集成部署你的 Vue 项目，请确保它已推送到 Git 仓库。

使用导入流程将项目导入 Vercel。在导入过程中，你会发现所有相关的选项都已为你预先配置，你可以根据需要进行更改。

项目导入后，所有后续推送到分支的操作都会生成预览部署，对生产分支（通常为 "master" 或 "main"）所做的所有更改都会导致生产部署。

部署完成后，你会获得一个 URL 来查看你的应用，例如：https://vue-example-tawny.vercel.app/。

步骤 2（可选）：使用自定义域名

如果你想在你的 Vercel 部署中使用自定义域名，可以通过你的 Vercel 帐户域名设置添加或转移你的域名。

要将你的域名添加到你的项目，请从 Vercel 仪表板导航到你的项目。选择你的项目后，点击 "Settings" 选项卡，然后选择 Domains 菜单项。从你的项目的 Domain 页面，输入你想要添加到项目的域名。

域名添加后，你会看到不同的配置方法。

部署新的 Vue 项目

你可以使用以下部署按钮部署新的 Vue 项目，并为你设置 Git 仓库

参考资料：

Stdlib

TODO | 开放贡献。

Heroku

安装 Heroku CLI
创建一个 `static.json` 文件

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

将 `static.json` 文件添加到 git

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

部署到 Heroku

heroku login
heroku create
heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static
git push heroku main

更多信息：在 Heroku 上开始使用 SPA

Surge

要使用 Surge 部署，步骤非常简单。

首先，你需要通过运行 `npm run build` 来构建你的项目。如果你还没有安装 Surge 的命令行工具，只需运行以下命令即可安装

npm install --global surge

然后进入你的项目的 `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 的帮助页面。

Bitbucket Cloud

如 Bitbucket 文档中所述，你需要创建一个名为 `<USERNAME>.bitbucket.io` 的仓库。
可以发布到主仓库的子文件夹，例如，如果你想拥有多个网站。在这种情况下，请在 `vue.config.js` 中设置正确的 `publicPath`。
如果你部署到 `https://<USERNAME>.bitbucket.io/`，则可以省略 `publicPath`，因为它默认为 `"/" `。
如果你部署到 `https://<USERNAME>.bitbucket.io/<SUBFOLDER>/`，请将 `publicPath` 设置为 `"/<SUBFOLDER>/"`。在这种情况下，仓库的目录结构应反映 URL 结构，例如，仓库应具有 ` /<SUBFOLDER>` 目录。

在你的项目中，创建一个名为 `deploy.sh` 的文件，内容如下，并运行它进行部署

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
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 部署你的应用程序。

安装 docker

在你的项目根目录下创建一个名为 `Dockerfile` 的文件。

FROM node:latest as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf

在你的项目根目录下创建一个名为 `.dockerignore` 的文件
设置 `.dockerignore` 文件可以防止 `node_modules` 和任何中间构建工件被复制到镜像中，这可能会在构建过程中导致问题。
```
**/node_modules
**/dist
```

在你的项目根目录下创建一个名为 `nginx.conf` 的文件

Nginx 是一个 HTTP(s) 服务器，将在你的 Docker 容器中运行。它使用配置文件来确定如何提供内容/监听哪些端口等等。请参阅 nginx 配置文档，了解所有可能的配置选项的示例。

以下是一个简单的 `nginx` 配置，它在端口 `80` 上提供你的 vue 项目。根 `index.html` 用于提供 `页面未找到` / `404` 错误，这使我们能够使用基于 `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;
    }
  }
}

构建你的 Docker 镜像

docker build . -t my-app
# Sending build context to Docker daemon  884.7kB
# ...
# Successfully built 4b00e5ee82ae
# Successfully tagged my-app:latest

运行你的 Docker 镜像
此构建基于官方的 `nginx` 镜像，因此日志重定向已设置，并且自守护程序已关闭。还设置了一些其他默认设置，以改进在 Docker 容器中运行 nginx。请参阅 nginx docker 仓库以了解更多信息。
```
docker run -d -p 8080:80 my-app
curl localhost:8080
# <!DOCTYPE html><html lang=en>...</html>
```

构建目标

故障排除

部署 #

一般指南 #

本地预览 #

使用 history.pushState 路由 #

CORS #

PWA #

平台指南 #

GitHub Pages #

手动推送更新 #

使用 Travis CI 进行自动更新 #

GitLab Pages #

Netlify #

在 Vue Router 上使用 history 模式 #

推荐方法 #

替代方法 #

渲染 #

Amazon S3 #

Firebase #

Vercel #

步骤 1：将你的 Vue 项目部署到 Vercel #

步骤 2（可选）：使用自定义域名 #

部署新的 Vue 项目 #

参考资料： #

Stdlib #

Heroku #

Surge #

Bitbucket Cloud #

Docker (Nginx) #

部署