chore: merge branch 'next' into dev

tiwuofficial · Sep 24, 2019 · bd9442b · bd9442b
2 parents f5c39b6 + 3f5f438
commit bd9442b
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 56 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -50,7 +50,7 @@ module.exports = {
   themeConfig: {
     repo: 'vuejs/vue-cli',
     docsDir: 'docs',
-    docsBranch: 'docs',
+    docsBranch: 'next',
     editLinks: true,
     sidebarDepth: 3,
     algolia: {

diff --git a/docs/guide/cli-service.md b/docs/guide/cli-service.md
@@ -179,4 +179,4 @@ When installed, `@vue/cli-service` also installs [yorkie](https://github.com/yyx
 
 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.
 
-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.
+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.
diff --git a/docs/guide/deployment.md b/docs/guide/deployment.md
@@ -439,14 +439,16 @@ Deploy your application using nginx inside of a docker container.
 2. Create a `Dockerfile` file in the root of your project.
 
     ```docker
-    FROM node:10
-    COPY ./ /app
+    FROM node:latest as build-stage
     WORKDIR /app
-    RUN npm install && npm run build
+    COPY package*.json ./
+    RUN npm install
+    COPY ./ .
+    RUN npm run build
 
-    FROM nginx
+    FROM nginx as production-stage
     RUN mkdir /app
-    COPY --from=0 /app/dist /app
+    COPY --from=build-stage /app/dist /app
     COPY nginx.conf /etc/nginx/nginx.conf
     ```
 

diff --git a/docs/guide/html-and-static-assets.md b/docs/guide/html-and-static-assets.md
@@ -72,7 +72,7 @@ import(/* webpackPrefetch: true */ './someAsyncComponent.vue')
 webpack's runtime will inject prefetch links when the parent chunk is loaded.
 
 ::: tip
-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.
+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.
 :::
 
 ### Disable Index Generation

diff --git a/docs/zh/guide/build-targets.md b/docs/zh/guide/build-targets.md
@@ -19,6 +19,11 @@
 
 ::: tip 注意对 Vue 的依赖
 在库模式中，Vue 是*外置的*。这意味着包中不会有 Vue，即便你在代码中导入了 Vue。如果这个库会通过一个打包器使用，它将尝试通过打包器以依赖的方式加载 Vue；否则就会回退到一个全局的 `Vue` 变量。
+
+要避免此行为，可以在`build`命令中添加`--inline-vue`标志。
+```
+vue-cli-service build --target lib --inline-vue
+```
 :::
 
 

diff --git a/docs/zh/guide/deployment.md b/docs/zh/guide/deployment.md
@@ -31,19 +31,17 @@ serve -s dist
 
 如果你使用了 PWA 插件，那么应用必须架设在 HTTPS 上，这样 [Service Worker](https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API) 才能被正确注册。
 
-<!-- @todo: translation -->
-
-## Platform Guides
-
-(暂未翻译，此部分英文文档处于开放贡献中)
+## 平台指南
 
 ### GitHub Pages
+
+#### 手动推送更新
 
 1. 在 `vue.config.js` 中设置正确的 `publicPath`。
 
-   如果打算将项目部署到 `https://<USERNAME>.github.io/` 上 , `publicPath` 将默认被设为 `"/"`，你可以忽略这个参数。
+   如果打算将项目部署到 `https://<USERNAME>.github.io/` 上, `publicPath` 将默认被设为 `"/"`，你可以忽略这个参数。
 
-   如果打算将项目部署到 `https://<USERNAME>.github.io/<REPO>/` 上, (换句话说 仓库地址为 `https://github.com/<USERNAME>/<REPO>`), 可将 `publicPath` 设为 `"/<REPO>/"` 。 举个例子， 如果仓库名字为 "my-project"，`vue.config.js` 的内容应如下所示:
+   如果打算将项目部署到 `https://<USERNAME>.github.io/<REPO>/` 上 (即仓库地址为 `https://github.com/<USERNAME>/<REPO>`)，可将 `publicPath` 设为 `"/<REPO>/"`。举个例子，如果仓库名字为“my-project”，那么 `vue.config.js` 的内容应如下所示：
 
     ``` js
     module.exports = {
@@ -53,7 +51,7 @@ serve -s dist
     }
     ```
 
-2. 在项目目录下， 用以下的代码创建 `deploy.sh`（可以适当地取消注释）并运行它以进行部署：
+2. 在项目目录下，创建内容如下的 `deploy.sh` (可以适当地取消注释) 并运行它以进行部署：
 
     ``` bash{13,20,23}
     #!/usr/bin/env sh
@@ -83,9 +81,33 @@ serve -s dist
     cd -
     ```
 
-    ::: tip
-    您还可以在 CI 设置中配置上述脚本，以便在每次推送时启用自动部署。
-    :::
+#### 使用 Travis CI 自动更新
+
+1. 仿照上面在 `vue.config.js` 中设置正确的 `publicPath`。
+2. 安装 Travis CLI 客户端：`gem install travis && travis --login`
+3. 生成一个拥有“repo”权限的 GitHub [访问令牌](https://help.github.com/cn/articles/creating-a-personal-access-token-for-the-command-line)。
+4. 授予 Travis 访问仓库的权限：`travis set GITHUB_TOKEN=xxx` (`xxx` 是第三步中的个人访问令牌)
+5. 在项目根目录下创建一个 `.travis.yml` 文件。
+
+    ```yaml
+    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
 
@@ -130,16 +152,45 @@ module.exports = {
 
 1. 在 Netlify 上，使用以下设置从 GitHub 创建新项目:
 
-    - **构建命令:** `npm run build` or `yarn build`
+    - **构建命令:** `npm run build` 或 `yarn build`
     - **发布目录:** `dist`
 
-2. 点击 deploy 按钮！
+2. 点击“deploy”按钮！
 
 也可以查看 [vue-cli-plugin-netlify-lambda](https://github.com/netlify/vue-cli-plugin-netlify-lambda)。
 
+如果使用 Vue Router 的 history 模式，你需要在 `/public` 目录下创建一个 `_redirects` 文件：
+
+```
+# 单页应用的 Netlify 设置
+/*    /index.html   200
+```
+
+详细信息请查看 [Netlify 重定向文档](https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps)。
+
+### Render
+
+[Render](https://render.com/) 提供带有全托管 SSL，全球 CDN 和 GitHub 持续自动部署的[免费静态站点托管](https://render.com/docs/static-sites)服务。
+
+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 的[重定向和改写](https://render.com/docs/redirects-rewrites)及[自定义域名](https://render.com/docs/custom-domains)文档。
+
 ### Amazon S3
 
-见 [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
 
@@ -204,55 +255,71 @@ firebase deploy --only hosting
 
 请参考 [Firebase 文档](https://firebase.google.com/docs/hosting/deploying) 来获取更多细节。
 
-### Now
+### ZEIT Now
 
-1. 全局安装 Now CLI: `npm install -g now`
+[ZEIT Now](https://zeit.co/) 是一个网站和无服务器 (Serverless) API 云平台，你可以使用你的个人域名 (或是免费的 `.now.sh` URL) 部署你的 Vue 项目。
 
-2. 添加 `now.json` 文件到项目根目录 ：
+#### 步骤一：安装 Now CLI
 
-    ```json
-    {
-      "name": "my-example-app",
-      "type": "static",
-      "static": {
-        "public": "dist",
-        "rewrites": [
-          {
-            "source": "**",
-            "destination": "/index.html"
-          }
-        ]
-      },
-      "alias": "vue-example",
-      "files": [
-        "dist"
-      ]
-    }
-    ```
+要使用 [npm](https://www.npmjs.com/package/now) 安装其命令行界面，运行以下命令：
 
-    您可以通过阅读来进一步了解自定义静态服务的信息 [Now's 文档](https://zeit.co/docs/deployment-types/static)。
+```
+npm install -g now
+```
 
-3. 在 `package.json` 中添加部署脚本：
+#### 步骤二：部署
 
-    ```json
-    "deploy": "npm run build && now && now alias"
-    ```
+在项目根目录运行以下命令部署你的应用：
 
-    如果想要将项目默认公开部署，部署脚本如下
+```
+now
+```
 
-    ```json
-    "deploy": "npm run build && now --public && now alias"
-    ```
+**此外**，你还可以使用他们的 [GitHub](https://zeit.co/github) 或 [GitLab](https://zeit.co/gitlab) 集成服务。
+
+大功告成！
 
-    这将自动将站点的别名指向最新的部署。现在，只要运行 `npm run deploy` 就可以部署你的应用。
+你的站点会开始部署，你将获得一个形如 [https://vue.now-examples.now.sh/](https://vue.now-examples.now.sh/) 的链接。
+
+开箱即用地，请求会被自动改写到 `index.html` (除了自定义的静态文件) 并带有合适的缓存请求头。你可以[改写](https://zeit.co/docs/v2/advanced/routes/)这些规则。
 
 ### Stdlib
 
-> TODO | Open to contribution.
+> 未完成 | 欢迎参与贡献。
 
 ### Heroku
 
-> TODO | Open to contribution.
+1. [安装 Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)
+2. 创建 `static.json` 文件：
+
+    ```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
 
@@ -310,3 +377,90 @@ npm install --global surge
 
     cd -
     ```
+
+### Docker (Nginx)
+
+在 Docker 容器中使用 Nginx 部署你的应用。
+
+1. 安装 [Docker](https://www.docker.com/get-started)
+2. 在项目根目录创建 `Dockerfile` 文件
+
+    ```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` 和其他中间构建产物被复制到镜像中导致构建问题。
+
+    ```gitignore
+    **/node_modules
+    **/dist
+    ```
+
+4. 在项目根目录创建 `nginx.conf` 文件
+
+    `Nginx` 是一个能在 Docker 容器中运行的 HTTP(s) 服务器。它使用配置文件决定如何提供内容、要监听的端口等。参阅 [Nginx 设置文档](https://www.nginx.com/resources/wiki/start/topics/examples/full/) 以了解所有可能的设置选项。
+
+    下面是一个简单的 `Nginx` 设置文件，它会在 `80` 端口上提供你的 Vue 项目。`页面未找到` / `404` 错误使用的是 `index.html`，这让我们可以使用基于 `pushState()` 的路由。
+
+    ```text
+    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 镜像
+
+    ```bash
+    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 仓库](https://hub.docker.com/_/nginx)。
+
+    ```bash
+    docker run -d -p 8080:80 my-app
+    curl localhost:8080
+    # <!DOCTYPE html><html lang=en>...</html>
+    ```
Original file line number	Diff line number	Diff line change
Expand Up		@@ -179,4 +179,4 @@ When installed, `@vue/cli-service` also installs [yorkie](https://github.com/yyx

		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.

		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.
		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.