@@ -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
42401 . 在 ` 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
1311531. 在 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