Skip to content

docs(zh): update deployment.md #3315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 17, 2019
Merged

docs(zh): update deployment.md #3315

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bbbc8b1
[doc] Chinese docs translation
yuantongkang Jan 16, 2019
092891a
修正翻译
yuantongkang Jan 17, 2019
e4b5554
update deployment.md
yuantongkang Jan 17, 2019
0db5fcc
update deployment.md
yuantongkang Jan 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 61 additions & 61 deletions docs/zh/guide/deployment.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,12 @@ serve -s dist
(暂未翻译，此部分英文文档处于开放贡献中)

### GitHub Pages

1. 在 `vue.config.js` 中设置正确的 `publicPath`。

如果打算将项目部署到 `https://<USERNAME>.github.io/` 上 , `publicPath` 将默认被设为 `"/"`，你可以忽略这个参数。

1. Set correct `publicPath` in `vue.config.js`.

If you are deploying to `https://<USERNAME>.github.io/`, you can omit `publicPath` as it defaults to `"/"`.

If you are deploying to `https://<USERNAME>.github.io/<REPO>/`, (i.e. your repository is at `https://github.com/<USERNAME>/<REPO>`), set `publicPath` to `"/<REPO>/"`. For example, if your repo name is "my-project", your `vue.config.js` should look like this:
如果打算将项目部署到 `https://<USERNAME>.github.io/<REPO>/` 上, (换句话说 仓库地址为 `https://github.com/<USERNAME>/<REPO>`), 可将 `publicPath` 设为 `"/<REPO>/"` 。 举个例子， 如果仓库名字为 "my-project"，`vue.config.js` 的内容应如下所示:

``` js
module.exports = {
Expand All @@ -53,67 +53,67 @@ serve -s dist
}
```

2. Inside your project, create `deploy.sh` with the following content (with highlighted lines uncommented appropriately) and run it to deploy:
2. 在项目目录下， 用以下的代码创建 `deploy.sh`（可以适当地取消注释）并运行它以进行部署：

``` bash{13,20,23}
#!/usr/bin/env sh

# abort on errors
# 当发生错误时中止脚本
set -e

# build
# 构建
npm run build

# navigate into the build output directory
# cd 到构建输出的目录下
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
# 部署到 https://<USERNAME>.github.io
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master

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

cd -
```

::: tip
You can also run the above script in your CI setup to enable automatic deployment on each push.
您还可以在 CI 设置中配置上述脚本，以便在每次推送时启用自动部署。
:::

### GitLab Pages

As described by [GitLab Pages documentation](https://docs.gitlab.com/ee/user/project/pages/), everything happens with a `.gitlab-ci.yml` file placed in the root of your repository. This working example will get you started:
根据 [GitLab Pages 文档](https://docs.gitlab.com/ee/user/project/pages/)的描述，所有的配置都在根目录中的`.gitlab-ci.yml` 文件中。下面的范例是一个很好的入门:

```yaml
# .gitlab-ci.yml file to be placed in the root of your repository
# .gitlab-ci.yml 文件应放在你仓库的根目录下

pages: # the job must be named pages
pages: # 必须定义一个名为 pages 的 job
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)
- mv public public-vue # GitLab Pages 的钩子设置在 public 文件夹
- mv dist public # 重命名 dist 文件夹 (npm run build 之后的输出位置)
artifacts:
paths:
- public # artifact path must be /public for GitLab Pages to pick it up
- public # artifact path 一定要在 /public , 这样 GitLab Pages 才能获取
only:
- master
```

Typically, your static website will be hosted on https://yourUserName.gitlab.io/yourProjectName, so you will also want to create an initial `vue.config.js` file to [update the `BASE_URL`](https://github.com/vuejs/vue-cli/tree/dev/docs/config#baseurl) value to match:
通常, 你的静态页面将托管在 https://yourUserName.gitlab.io/yourProjectName 上, 所以你可以创建一个 initial `vue.config.js` 文件去 [更新 `BASE_URL`](https://github.com/vuejs/vue-cli/tree/dev/docs/config#baseurl) 要匹配的值 ：

```javascript
// vue.config.js file to be place in the root of your repository
// make sure you update `yourProjectName` with the name of your GitLab project
// vue.config.js 位于仓库的根目录下
// 确保用 GitLab 项目的名称替换了 `YourProjectName`

module.exports = {
publicPath: process.env.NODE_ENV === 'production'
Expand All @@ -122,46 +122,46 @@ module.exports = {
}
```

Please read through the docs on [GitLab Pages domains](https://docs.gitlab.com/ee/user/project/pages/getting_started_part_one.html#gitlab-pages-domain) for more info about the URL where your project website will be hosted. Be aware you can also [use a custom domain](https://docs.gitlab.com/ee/user/project/pages/getting_started_part_three.html#adding-your-custom-domain-to-gitlab-pages).
请阅读在 [GitLab Pages domains](https://docs.gitlab.com/ee/user/project/pages/getting_started_part_one.html#gitlab-pages-domain) 的文档来学习更多关于页面部署 URL 的信息。注意，你也可以[使用自定义域名](https://docs.gitlab.com/ee/user/project/pages/getting_started_part_three.html#adding-your-custom-domain-to-gitlab-pages)。

Commit both the `.gitlab-ci.yml` and `vue.config.js` files before pushing to your repository. A GitLab CI pipeline will be triggered: when successful, visit your project's `Settings > Pages` to see your website link, and click on it.
在推送到仓库之前提交 `.gitlab-ci.yml` 和 `vue.config.js` 文件。GitLab CI 的管道将会被触发: 当成功时候, 到 `Settings > Pages` 查看关于网站的链接。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

「当成功时候」->「成功之后」，「关于」多余，注意标点。


### Netlify

1. On Netlify, setup up a new project from GitHub with the following settings:
1. 在 Netlify 上，使用以下设置从 GitHub 创建新项目:

- **Build Command:** `npm run build` or `yarn build`
- **Publish directory:** `dist`
- **构建命令:** `npm run build` or `yarn build`
- **发布目录:** `dist`

2. Hit the deploy button!
2. 点击 deploy 按钮！

Also checkout [vue-cli-plugin-netlify-lambda](https://github.com/netlify/vue-cli-plugin-netlify-lambda).
也可以查看 [vue-cli-plugin-netlify-lambda](https://github.com/netlify/vue-cli-plugin-netlify-lambda)。

### Amazon S3

See [vue-cli-plugin-s3-deploy](https://github.com/multiplegeorges/vue-cli-plugin-s3-deploy).
见 [vue-cli-plugin-s3-deploy](https://github.com/multiplegeorges/vue-cli-plugin-s3-deploy)。

### Firebase

Create a new Firebase project on your [Firebase console](https://console.firebase.google.com). Please refer to this [documentation](https://firebase.google.com/docs/web/setup) on how to setup your project.
创建一个新的 Firebase 项目 [Firebase console](https://console.firebase.google.com)。 请参考[文档](https://firebase.google.com/docs/web/setup)。

Make sure you have installed [firebase-tools](https://github.com/firebase/firebase-tools) globally:
确保已经全局安装了 [firebase-tools](https://github.com/firebase/firebase-tools) ：

```
npm install -g firebase-tools
```

From the root of your project, initialize `firebase` using the command:
在项目的根目录下, 用以下命令初始化 `firebase` ：

```
firebase init
```

Firebase will ask some questions on how to setup your project.
Firebase 将会询问有关初始化项目的一些问题。

- Choose which Firebase CLI features you want to setup your project. Make sure to select `hosting`.
- Select the default Firebase project for your project.
- Set your `public` directory to `dist` (or where your build's output is) which will be uploaded to Firebase Hosting.
- 选择需要 Firebase CLI 的功能。 一定要选择 `hosting` 。
- 选择默认的 Firebase 项目。
- 将 `public` 目录设为 `dist` (或构建输出的位置) 这将会上传到 Firebase Hosting。

```javascript
// firebase.json
Expand All @@ -173,7 +173,7 @@ Firebase will ask some questions on how to setup your project.
}
```

- Select `yes` to configure your project as a single-page app. This will create an `index.html` and on your `dist` folder and configure your `hosting` information.
- 选择 `yes` 设置项目为一个单页应用。 这将会创建一个 `index.html` 在 `dist` 文件夹并且配置 `hosting` 信息。

```javascript
// firebase.json
Expand All @@ -190,25 +190,25 @@ Firebase will ask some questions on how to setup your project.
}
```

Run `npm run build` to build your project.
执行 `npm run build` 去构建项目。

To deploy your project on Firebase Hosting, run the command:
在 `Firebase Hosting` 部署项目，执行以下命令 ：

```
firebase deploy --only hosting
```

If you want other Firebase CLI features you use on your project to be deployed, run `firebase deploy` without the `--only` option.
如果需要在部署的项目中使用的其他 Firebase CLI 功能， 执行 `firebase deploy` 去掉 `--only` 参数。

You can now access your project on `https://<YOUR-PROJECT-ID>.firebaseapp.com`.
现在可以到 `https://<YOUR-PROJECT-ID>.firebaseapp.com` 访问你的项目了。

Please refer to the [Firebase Documentation](https://firebase.google.com/docs/hosting/deploying) for more details.
请参考 [Firebase 文档](https://firebase.google.com/docs/hosting/deploying) 来获取更多细节。

### Now

1. Install the Now CLI globally: `npm install -g now`
1. 全局安装 Now CLI: `npm install -g now`

2. Add a `now.json` file to your project root:
2. 添加 `now.json` 文件到项目根目录 ：

```json
{
Expand All @@ -230,21 +230,21 @@ Please refer to the [Firebase Documentation](https://firebase.google.com/docs/ho
}
```

You can further customize the static serving behavior by consulting [Now's documentation](https://zeit.co/docs/deployment-types/static).
您可以通过阅读来进一步了解自定义静态服务的信息 [Now's 文档](https://zeit.co/docs/deployment-types/static)。

3. Adding a deployment script in `package.json`:
3. 在 `package.json` 中添加部署脚本：

```json
"deploy": "npm run build && now && now alias"
```

If you want to deploy publicly by default, you can change the deployment script to the following one:
如果想要将项目默认公开部署，部署脚本如下

```json
"deploy": "npm run build && now --public && now alias"
```

This will automatically point your site's alias to the latest deployment. Now, just run `npm run deploy` to deploy your app.
这将自动将站点的别名指向最新的部署。现在，只要运行 `npm run deploy` 就可以部署你的应用。

### Stdlib

Expand All @@ -256,15 +256,15 @@ Please refer to the [Firebase Documentation](https://firebase.google.com/docs/ho

### Surge

To deploy with [Surge](http://surge.sh/) the steps are very straightforward.
要使用 [Surge](http://surge.sh/) 进行部署，步骤非常简单。

First you would need to build your project by running `npm run build`. And if you haven't installed Surge's command line tool, you can simply do so by running the command:
首先，通过运行 `npm run build` 来构建项目。如果还没有安装 Surge 的命令行工具，可以通过运行命令来执行此操作：

```
npm install --global surge
```

Then cd into the `dist/` folder of your project and then run `surge` and follow the screen prompt. It will ask you to set up email and password if it is the first time you are using Surge. Confirm the project folder and type in your preferred domain and watch your project being deployed such as below.
然后 cd 进入项目的 `dist/` 文件夹，然后运行 `surge` 并按照屏幕提示操作 。如果是第一次使用 Surge，它会要求设置电子邮件和密码。确认项目文件夹以及输入首选域来查看正在部署的项目，如下所示。

```
project: /Users/user/Documents/myawesomeproject/dist/
Expand All @@ -276,30 +276,30 @@ Then cd into the `dist/` folder of your project and then run `surge` and follow
Success! - Published to myawesomeproject.surge.sh
```

Verify your project is successfully published by Surge by visiting `myawesomeproject.surge.sh`, vola! For more setup details such as custom domains, you can visit [Surge's help page](https://surge.sh/help/).
通过访问 `myawesomeproject.surge.sh` 来确保你的项目已经成功的用 Surge 发布，有关自定义域名等更多设置详细信息，可以到 [Surge's help page](https://surge.sh/help/) 查看。

### Bitbucket Cloud

1. As described in the [Bitbucket documentation](https://confluence.atlassian.com/bitbucket/publishing-a-website-on-bitbucket-cloud-221449776.html) you need to create a repository named exactly `<USERNAME>.bitbucket.io`.
1. 如 [Bitbucket 文档](https://confluence.atlassian.com/bitbucket/publishing-a-website-on-bitbucket-cloud-221449776.html) 创建一个命名为 `<USERNAME>.bitbucket.io` 的仓库。

2. It is possible to publish to a subfolder of the main repository, for instance if you want to have multiple websites. In that case set correct `publicPath` in `vue.config.js`.
2. 如果你想拥有多个网站， 想要发布到主仓库的子文件夹中。这种情况下就要在 `vue.config.js` 设置 `publicPath`。

If you are deploying to `https://<USERNAME>.bitbucket.io/`, you can omit `publicPath` as it defaults to `"/"`.
如果部署到 `https://<USERNAME>.bitbucket.io/`， `publicPath` 默认将被设为 `"/"`，你可以选择忽略它。

If you are deploying to `https://<USERNAME>.bitbucket.io/<SUBFOLDER>/`, set `publicPath` to `"/<SUBFOLDER>/"`. In this case the directory structure of the repository should reflect the url structure, for instance the repository should have a `/<SUBFOLDER>` directory.
如果要部署到 `https://<USERNAME>.bitbucket.io/<SUBFOLDER>/`，设置 `publicPath` 为 `"/<SUBFOLDER>/"`。在这种情况下，仓库的目录结构应该反映 url 结构，例如仓库应该有 `/<SUBFOLDER>` 目录。

3. Inside your project, create `deploy.sh` with the following content and run it to deploy:
3. 在项目中， `deploy.sh` 使用以下内容创建并运行它以进行部署：

``` bash{13,20,23}
#!/usr/bin/env sh

# abort on errors
# 当发生错误时中止脚本
set -e

# build
# 构建
npm run build

# navigate into the build output directory
# cd 到构建输出的目录
cd dist

git init
Expand Down