Skip to content

Commit bd9442b

Browse files
committed
chore: merge branch 'next' into dev
2 parents f5c39b6 + 3f5f438 commit bd9442b

File tree

6 files changed

+217
-56
lines changed

6 files changed

+217
-56
lines changed

docs/.vuepress/config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ module.exports = {
5050
themeConfig: {
5151
repo: 'vuejs/vue-cli',
5252
docsDir: 'docs',
53-
docsBranch: 'docs',
53+
docsBranch: 'next',
5454
editLinks: true,
5555
sidebarDepth: 3,
5656
algolia: {

docs/guide/cli-service.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,4 +179,4 @@ When installed, `@vue/cli-service` also installs [yorkie](https://github.com/yyx
179179

180180
Projects created via `vue create` are ready to go without the need for additional configuration. The plugins are designed to work with one another so in most cases, all you need to do is pick the features you want during the interactive prompts.
181181

182-
However, we also understand that it's impossible to cater to every possible need, and the need of a project may also change over time. Projects created by Vue CLI allow you to configure almost every aspect of the tooling without ever needing to eject. Check out the [Config Reference](../config/) for more details.
182+
However, we also understand that it's impossible to cater to every possible need, and the needs of a project may also change over time. Projects created by Vue CLI allow you to configure almost every aspect of the tooling without ever needing to eject. Check out the [Config Reference](../config/) for more details.

docs/guide/deployment.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -439,14 +439,16 @@ Deploy your application using nginx inside of a docker container.
439439
2. Create a `Dockerfile` file in the root of your project.
440440
441441
```docker
442-
FROM node:10
443-
COPY ./ /app
442+
FROM node:latest as build-stage
444443
WORKDIR /app
445-
RUN npm install && npm run build
444+
COPY package*.json ./
445+
RUN npm install
446+
COPY ./ .
447+
RUN npm run build
446448
447-
FROM nginx
449+
FROM nginx as production-stage
448450
RUN mkdir /app
449-
COPY --from=0 /app/dist /app
451+
COPY --from=build-stage /app/dist /app
450452
COPY nginx.conf /etc/nginx/nginx.conf
451453
```
452454

docs/guide/html-and-static-assets.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ import(/* webpackPrefetch: true */ './someAsyncComponent.vue')
7272
webpack's runtime will inject prefetch links when the parent chunk is loaded.
7373

7474
::: tip
75-
Prefetch links will consume bandwidth. If you have a large app with many async chunks and your user are primarily mobile and thus bandwidth-aware, you may want to disable prefetch links and manually select chunks to prefetch.
75+
Prefetch links will consume bandwidth. If you have a large app with many async chunks and your users are primarily mobile and thus bandwidth-aware, you may want to disable prefetch links and manually select chunks to prefetch.
7676
:::
7777

7878
### Disable Index Generation

docs/zh/guide/build-targets.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@
1919

2020
::: tip 注意对 Vue 的依赖
2121
在库模式中,Vue 是*外置的*。这意味着包中不会有 Vue,即便你在代码中导入了 Vue。如果这个库会通过一个打包器使用,它将尝试通过打包器以依赖的方式加载 Vue;否则就会回退到一个全局的 `Vue` 变量。
22+
23+
要避免此行为,可以在`build`命令中添加`--inline-vue`标志。
24+
```
25+
vue-cli-service build --target lib --inline-vue
26+
```
2227
:::
2328

2429

docs/zh/guide/deployment.md

Lines changed: 202 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,17 @@ serve -s dist
3131

3232
如果你使用了 PWA 插件,那么应用必须架设在 HTTPS 上,这样 [Service Worker](https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API) 才能被正确注册。
3333

34-
<!-- @todo: translation -->
35-
36-
## Platform Guides
37-
38-
(暂未翻译,此部分英文文档处于开放贡献中)
34+
## 平台指南
3935

4036
### GitHub Pages
37+
38+
#### 手动推送更新
4139

4240
1.`vue.config.js` 中设置正确的 `publicPath`
4341

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

46-
如果打算将项目部署到 `https://<USERNAME>.github.io/<REPO>/`, (换句话说 仓库地址为 `https://github.com/<USERNAME>/<REPO>`), 可将 `publicPath` 设为 `"/<REPO>/"`举个例子, 如果仓库名字为 "my-project",`vue.config.js` 的内容应如下所示:
44+
如果打算将项目部署到 `https://<USERNAME>.github.io/<REPO>/` (即仓库地址为 `https://github.com/<USERNAME>/<REPO>`)可将 `publicPath` 设为 `"/<REPO>/"`举个例子,如果仓库名字为my-project”,那么 `vue.config.js` 的内容应如下所示
4745

4846
``` js
4947
module.exports = {
@@ -53,7 +51,7 @@ serve -s dist
5351
}
5452
```
5553

56-
2. 在项目目录下, 用以下的代码创建 `deploy.sh`可以适当地取消注释并运行它以进行部署:
54+
2. 在项目目录下,创建内容如下的 `deploy.sh` (可以适当地取消注释) 并运行它以进行部署:
5755

5856
``` bash{13,20,23}
5957
#!/usr/bin/env sh
@@ -83,9 +81,33 @@ serve -s dist
8381
cd -
8482
```
8583

86-
::: tip
87-
您还可以在 CI 设置中配置上述脚本,以便在每次推送时启用自动部署。
88-
:::
84+
#### 使用 Travis CI 自动更新
85+
86+
1. 仿照上面在 `vue.config.js` 中设置正确的 `publicPath`
87+
2. 安装 Travis CLI 客户端:`gem install travis && travis --login`
88+
3. 生成一个拥有“repo”权限的 GitHub [访问令牌](https://help.github.com/cn/articles/creating-a-personal-access-token-for-the-command-line)。
89+
4. 授予 Travis 访问仓库的权限:`travis set GITHUB_TOKEN=xxx` (`xxx` 是第三步中的个人访问令牌)
90+
5. 在项目根目录下创建一个 `.travis.yml` 文件。
91+
92+
```yaml
93+
language: node_js
94+
node_js:
95+
- "node"
96+
97+
cache: npm
98+
99+
script: npm run build
100+
101+
deploy:
102+
provider: pages
103+
skip_cleanup: true
104+
github_token: $GITHUB_TOKEN
105+
local_dir: dist
106+
on:
107+
branch: master
108+
```
109+
110+
6.`.travis.yml` 文件推送到仓库来触发第一次构建。
89111

90112
### GitLab Pages
91113

@@ -130,16 +152,45 @@ module.exports = {
130152

131153
1. 在 Netlify 上,使用以下设置从 GitHub 创建新项目:
132154

133-
- **构建命令:** `npm run build` or `yarn build`
155+
- **构建命令:** `npm run build` `yarn build`
134156
- **发布目录:** `dist`
135157

136-
2. 点击 deploy 按钮!
158+
2. 点击deploy按钮!
137159

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

162+
如果使用 Vue Router 的 history 模式,你需要在 `/public` 目录下创建一个 `_redirects` 文件:
163+
164+
```
165+
# 单页应用的 Netlify 设置
166+
/* /index.html 200
167+
```
168+
169+
详细信息请查看 [Netlify 重定向文档](https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps)。
170+
171+
### Render
172+
173+
[Render](https://render.com/) 提供带有全托管 SSL,全球 CDN 和 GitHub 持续自动部署的[免费静态站点托管](https://render.com/docs/static-sites)服务。
174+
175+
1. 在 Render 上创建一个新的 Web Service,并授予 Render 的 GitHub 应用访问你的 Vue 仓库的权限。
176+
2. 在创建过程中使用以下设置:
177+
- **环境**`Static Site`
178+
- **构建命令**`npm run build` 或者 `yarn build`
179+
- **发布目录**`dist`
180+
181+
大功告成!构建结束时你的应用便会在你的 Render URL 上线。
182+
183+
如果使用 Vue Router 的 history 模式,你需要在站点的 `Redirects/Rewrites` 设置中添加以下改写规则:
184+
185+
- **Source**: `/*`
186+
- **Destination**: `/index.html`
187+
- **Status**: `Rewrite`
188+
189+
详细信息请查看 Render 的[重定向和改写](https://render.com/docs/redirects-rewrites)及[自定义域名](https://render.com/docs/custom-domains)文档。
190+
140191
### Amazon S3
141192

142-
[vue-cli-plugin-s3-deploy](https://github.com/multiplegeorges/vue-cli-plugin-s3-deploy)。
193+
参见 [vue-cli-plugin-s3-deploy](https://github.com/multiplegeorges/vue-cli-plugin-s3-deploy)。
143194

144195
### Firebase
145196

@@ -204,55 +255,71 @@ firebase deploy --only hosting
204255

205256
请参考 [Firebase 文档](https://firebase.google.com/docs/hosting/deploying) 来获取更多细节。
206257

207-
### Now
258+
### ZEIT Now
208259

209-
1. 全局安装 Now CLI: `npm install -g now`
260+
[ZEIT Now](https://zeit.co/) 是一个网站和无服务器 (Serverless) API 云平台,你可以使用你的个人域名 (或是免费的 `.now.sh` URL) 部署你的 Vue 项目。
210261

211-
2. 添加 `now.json` 文件到项目根目录 :
262+
#### 步骤一:安装 Now CLI
212263

213-
```json
214-
{
215-
"name": "my-example-app",
216-
"type": "static",
217-
"static": {
218-
"public": "dist",
219-
"rewrites": [
220-
{
221-
"source": "**",
222-
"destination": "/index.html"
223-
}
224-
]
225-
},
226-
"alias": "vue-example",
227-
"files": [
228-
"dist"
229-
]
230-
}
231-
```
264+
要使用 [npm](https://www.npmjs.com/package/now) 安装其命令行界面,运行以下命令:
232265

233-
您可以通过阅读来进一步了解自定义静态服务的信息 [Now's 文档](https://zeit.co/docs/deployment-types/static)。
266+
```
267+
npm install -g now
268+
```
234269

235-
3. 在 `package.json` 中添加部署脚本:
270+
#### 步骤二:部署
236271

237-
```json
238-
"deploy": "npm run build && now && now alias"
239-
```
272+
在项目根目录运行以下命令部署你的应用:
240273

241-
如果想要将项目默认公开部署,部署脚本如下
274+
```
275+
now
276+
```
242277

243-
```json
244-
"deploy": "npm run build && now --public && now alias"
245-
```
278+
**此外**,你还可以使用他们的 [GitHub](https://zeit.co/github) 或 [GitLab](https://zeit.co/gitlab) 集成服务。
279+
280+
大功告成!
246281

247-
这将自动将站点的别名指向最新的部署。现在,只要运行 `npm run deploy` 就可以部署你的应用。
282+
你的站点会开始部署,你将获得一个形如 [https://vue.now-examples.now.sh/](https://vue.now-examples.now.sh/) 的链接。
283+
284+
开箱即用地,请求会被自动改写到 `index.html` (除了自定义的静态文件) 并带有合适的缓存请求头。你可以[改写](https://zeit.co/docs/v2/advanced/routes/)这些规则。
248285

249286
### Stdlib
250287

251-
> TODO | Open to contribution.
288+
> 未完成 | 欢迎参与贡献。
252289

253290
### Heroku
254291

255-
> TODO | Open to contribution.
292+
1. [安装 Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)
293+
2. 创建 `static.json` 文件:
294+
295+
```json
296+
{
297+
"root": "dist",
298+
"clean_urls": true,
299+
"routes": {
300+
"/**": "index.html"
301+
}
302+
}
303+
```
304+
305+
3.`static.json` 加入 Git
306+
307+
```
308+
git add static.json
309+
git commit -m "add static configuration"
310+
```
311+
312+
4. 部署到 Heroku
313+
314+
```
315+
heroku login
316+
heroku create
317+
heroku buildpacks:add heroku/nodejs
318+
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static
319+
git push heroku master
320+
```
321+
322+
详细信息:https://gist.github.com/hone/24b06869b4c1eca701f9
256323

257324
### Surge
258325

@@ -310,3 +377,90 @@ npm install --global surge
310377
311378
cd -
312379
```
380+
381+
### Docker (Nginx)
382+
383+
在 Docker 容器中使用 Nginx 部署你的应用。
384+
385+
1. 安装 [Docker](https://www.docker.com/get-started)
386+
2. 在项目根目录创建 `Dockerfile` 文件
387+
388+
```Dockerfile
389+
FROM node:10
390+
COPY ./ /app
391+
WORKDIR /app
392+
RUN npm install && npm run build
393+
394+
FROM nginx
395+
RUN mkdir /app
396+
COPY --from=0 /app/dist /app
397+
COPY nginx.conf /etc/nginx/nginx.conf
398+
```
399+
400+
3. 在项目根目录创建 `.dockerignore` 文件
401+
402+
设置 `.dockerignore` 文件能防止 `node_modules` 和其他中间构建产物被复制到镜像中导致构建问题。
403+
404+
```gitignore
405+
**/node_modules
406+
**/dist
407+
```
408+
409+
4. 在项目根目录创建 `nginx.conf` 文件
410+
411+
`Nginx` 是一个能在 Docker 容器中运行的 HTTP(s) 服务器。它使用配置文件决定如何提供内容、要监听的端口等。参阅 [Nginx 设置文档](https://www.nginx.com/resources/wiki/start/topics/examples/full/) 以了解所有可能的设置选项。
412+
413+
下面是一个简单的 `Nginx` 设置文件,它会在 `80` 端口上提供你的 Vue 项目。`页面未找到` / `404` 错误使用的是 `index.html`,这让我们可以使用基于 `pushState()` 的路由。
414+
415+
```text
416+
user nginx;
417+
worker_processes 1;
418+
error_log /var/log/nginx/error.log warn;
419+
pid /var/run/nginx.pid;
420+
events {
421+
worker_connections 1024;
422+
}
423+
http {
424+
include /etc/nginx/mime.types;
425+
default_type application/octet-stream;
426+
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
427+
'$status $body_bytes_sent "$http_referer" '
428+
'"$http_user_agent" "$http_x_forwarded_for"';
429+
access_log /var/log/nginx/access.log main;
430+
sendfile on;
431+
keepalive_timeout 65;
432+
server {
433+
listen 80;
434+
server_name localhost;
435+
location / {
436+
root /app;
437+
index index.html;
438+
try_files $uri $uri/ /index.html;
439+
}
440+
error_page 500 502 503 504 /50x.html;
441+
location = /50x.html {
442+
root /usr/share/nginx/html;
443+
}
444+
}
445+
}
446+
```
447+
448+
5. 构建你的 Docker 镜像
449+
450+
```bash
451+
docker build . -t my-app
452+
# Sending build context to Docker daemon 884.7kB
453+
# ...
454+
# Successfully built 4b00e5ee82ae
455+
# Successfully tagged my-app:latest
456+
```
457+
458+
6. 运行你的 Docker 镜像
459+
460+
这个例子基于官方 `Nginx` 镜像,因此已经设置了日志重定向并关闭了自我守护进程。它也提供了其他有利于 Nginx 在 Docker 容器中运行的默认设置。更多信息参阅 [Nginx Docker 仓库](https://hub.docker.com/_/nginx)。
461+
462+
```bash
463+
docker run -d -p 8080:80 my-app
464+
curl localhost:8080
465+
# <!DOCTYPE html><html lang=en>...</html>
466+
```

0 commit comments

Comments
 (0)