|
1 | 1 | # Deployment
|
2 | 2 |
|
3 |
| -## GitHub Pages |
| 3 | +## General Guidelines |
| 4 | + |
| 5 | +If you are using Vue CLI along with a backend framework that handles static assets as part of its deployment, all you need to do is making sure Vue CLI generates the built files in the correct location, and then follow the deployment instruction of your backend framework. |
| 6 | + |
| 7 | +If you are developing your frontend app separately from your backend - i.e. your backend exposes an API for your frontend to talk to, then your frontend is essentially a purely static app. You can deploy the built content in the `dist` directory to any static file server, but make sure to set the correct [baseUrl](../config/#baseurl). |
| 8 | + |
| 9 | +### Previewing Locally |
| 10 | + |
| 11 | +The `dist` directory is meant to be served by an HTTP server, so it will not work if you open `dist/index.html` directly over `file://` protocol. The easiest way to preview your production build locally is using a Node.js static file server, for example [serve](https://github.com/zeit/serve): |
| 12 | + |
| 13 | +``` bash |
| 14 | +npm install -g serve |
| 15 | +# -s flag means serve it in Single-Page Application mode |
| 16 | +# which deals with the routing problem below |
| 17 | +serve -s dist |
| 18 | +``` |
| 19 | + |
| 20 | +### Routing with `history.pushState` |
| 21 | + |
| 22 | +If you are using Vue Router in `history` mode, a simple static file server will fail. For example, if you used Vue Router with a route for `/todos/42`, the dev server has been configured to respond to `localhost:3000/todos/42` properly, but a simple static server serving a production build will respond with a 404 instead. |
| 23 | + |
| 24 | +To fix that, you will need to configure your production server to fallback to `index.html` for any requests that do not match a static file. The Vue Router docs provides [configuration instructions for common server setups](https://router.vuejs.org/guide/essentials/history-mode.html). |
| 25 | + |
| 26 | +### CORS |
| 27 | + |
| 28 | +If your static frontend is deployed to a different domain from your backend API, you will need to properly configure [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). |
| 29 | + |
| 30 | +### PWA |
| 31 | + |
| 32 | +If you are using the PWA plugin, your app must be served over HTTPS so that [Service Worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) can be properly registered. |
| 33 | + |
| 34 | +## Platform Guides |
| 35 | + |
| 36 | +### GitHub Pages |
4 | 37 |
|
5 | 38 | > TODO | Open to contribution.
|
6 | 39 |
|
7 |
| -## GitLab Pages |
| 40 | +### GitLab Pages |
8 | 41 |
|
9 | 42 | > TODO | Open to contribution.
|
10 | 43 |
|
11 |
| -## Netlify |
| 44 | +### Netlify |
12 | 45 |
|
13 | 46 | > TODO | Open to contribution.
|
14 | 47 |
|
15 | 48 | Also checkout [vue-cli-plugin-netlify-lambda](https://github.com/netlify/vue-cli-plugin-netlify-lambda).
|
16 | 49 |
|
17 |
| -## Amazon S3 |
| 50 | +### Amazon S3 |
18 | 51 |
|
19 | 52 | See [vue-cli-plugin-s3-deploy](https://github.com/multiplegeorges/vue-cli-plugin-s3-deploy).
|
20 | 53 |
|
21 |
| -## Heroku |
| 54 | +### Azure |
| 55 | + |
| 56 | +> TODO | Open to contribution. |
| 57 | +
|
| 58 | +### Firebase |
| 59 | + |
| 60 | +> TODO | Open to contribution. |
| 61 | +
|
| 62 | +### Now |
| 63 | + |
| 64 | +> TODO | Open to contribution. |
| 65 | +
|
| 66 | +### Stdlib |
| 67 | + |
| 68 | +> TODO | Open to contribution. |
| 69 | +
|
| 70 | +### Heroku |
| 71 | + |
| 72 | +> TODO | Open to contribution. |
| 73 | +
|
| 74 | +### Surge |
22 | 75 |
|
23 | 76 | > TODO | Open to contribution.
|
0 commit comments