From cc9dba64a704ceb672f6de5d3eca28a94ddb5cda Mon Sep 17 00:00:00 2001 From: Natalia Tepluhina Date: Sun, 22 Sep 2019 08:23:30 +0300 Subject: [PATCH 1/5] docs: fixed vuepress link to next branch (#4604) --- docs/.vuepress/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index b0c6d276e..6ec5954c9 100644 --- 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: { From dcd2a850b8783f4bc62014ef061720371e576ff4 Mon Sep 17 00:00:00 2001 From: Owan Hunte Date: Mon, 2 Sep 2019 05:03:05 -0400 Subject: [PATCH 2/5] Documentation typo fixes (#4500) * Minor typo fix for CLI Service docs page In the last paragraph of the CLI Service docs page the second instance of the word 'need' should be changed to 'needs'. * Typo fix to 'HTML and Static Assets' docs page (cherry picked from commit b20e27ad12d7e78329b06fbab679a750a83bcb7f) --- docs/guide/cli-service.md | 2 +- docs/guide/html-and-static-assets.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guide/cli-service.md b/docs/guide/cli-service.md index b73b4674e..9a011500d 100644 --- 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/html-and-static-assets.md b/docs/guide/html-and-static-assets.md index 16a5bd47f..2599520a7 100644 --- 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 From ba97068bb38b53f4210e9cd2cbe27722fb2c287e Mon Sep 17 00:00:00 2001 From: vimvinter Date: Fri, 6 Sep 2019 15:33:22 +0800 Subject: [PATCH 3/5] docs(zh): update build-targets.md (#4505) [ci skip] (cherry picked from commit c730b76f436710f8c66140292cad922514568b3b) --- docs/zh/guide/build-targets.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/zh/guide/build-targets.md b/docs/zh/guide/build-targets.md index 1c4bb218f..ad191878f 100644 --- 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 +``` ::: From 3da900813df83ce5037306f8abe86f3a50764baa Mon Sep 17 00:00:00 2001 From: Kid Date: Sun, 8 Sep 2019 19:36:00 +0800 Subject: [PATCH 4/5] docs: update Chinese translation of Deployment (#4486) [ci skip] Co-Authored-By: GU Yiling (cherry picked from commit 9c99ce2be6253dbe21428eca88e5e38efbc024f4) --- docs/zh/guide/deployment.md | 250 +++++++++++++++++++++++++++++------- 1 file changed, 202 insertions(+), 48 deletions(-) diff --git a/docs/zh/guide/deployment.md b/docs/zh/guide/deployment.md index 0e642d392..730c08f2f 100644 --- 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) 才能被正确注册。 - - -## Platform Guides - -(暂未翻译，此部分英文文档处于开放贡献中) +## 平台指南 ### GitHub Pages + +#### 手动推送更新 1. 在 `vue.config.js` 中设置正确的 `publicPath`。 - 如果打算将项目部署到 `https://.github.io/` 上 , `publicPath` 将默认被设为 `"/"`，你可以忽略这个参数。 + 如果打算将项目部署到 `https://.github.io/` 上, `publicPath` 将默认被设为 `"/"`，你可以忽略这个参数。 - 如果打算将项目部署到 `https://.github.io//` 上, (换句话说 仓库地址为 `https://github.com//`), 可将 `publicPath` 设为 `"//"` 。 举个例子， 如果仓库名字为 "my-project"，`vue.config.js` 的内容应如下所示: + 如果打算将项目部署到 `https://.github.io//` 上 (即仓库地址为 `https://github.com//`)，可将 `publicPath` 设为 `"//"`。举个例子，如果仓库名字为“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 + # ... + ``` From 3f5f438f7e55d184e115c9e1bff353ef85df1c97 Mon Sep 17 00:00:00 2001 From: vahdet Date: Sat, 21 Sep 2019 17:17:12 +0300 Subject: [PATCH 5/5] Edited Dockerfile of Docker(Nginx) deployment doc (#4561) * Edited Dockerfile of Docker(Nginx) deployment doc Edited `Dockerfile` section of https://cli.vuejs.org/guide/deployment.html#docker-nginx As shown in [Vue v2 cookbook](https://vuejs.org/v2/cookbook/dockerize-vuejs-app.html) copying `package*.json` initially and running `npm install` in a separate step allows caching and reduces time elapsed during Docker build. Also the difference between the two docs will be reduced and be less confusing to those who end up with both of them. * node version to latest (cherry picked from commit 69f7145b0250aab6d8cd89d6affdcf80031dca93) --- docs/guide/deployment.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/guide/deployment.md b/docs/guide/deployment.md index d9ded4d0e..45b971a30 100644 --- 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. ```Dockerfile - 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 ```