You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/guide/deployment.md
+52-21
Original file line number
Diff line number
Diff line change
@@ -35,23 +35,53 @@ If you are using the PWA plugin, your app must be served over HTTPS so that [Ser
35
35
36
36
### GitHub Pages
37
37
38
-
There are a few different ways to deploy as described by [GitHub Pages documentation](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/). One way is to publish using a `/docs` folder on `master` branch.
38
+
1. Set correct `baseUrl` in `vue.config.js`.
39
39
40
-
Create an initial `vue.config.js` file to [update the `outputDir`](https://cli.vuejs.org/config/#outputdir) value to match `docs`. Typically, your static website will be hosted on https://yourUserName.github.io/yourProjectName, so you will also want to [update the `BASE_URL`](https://github.com/vuejs/vue-cli/tree/dev/docs/config#baseurl) value to match:
40
+
If you are deploying to `https://<USERNAME>.github.io/`, you can omit `baseUrl` as it defaults to `"/"`.
41
41
42
-
```javascript
43
-
// vue.config.js file to be place in the root of your repository
44
-
// make sure you update `yourProjectName` with the name of your GitHub project
42
+
If you are deploying to `https://<USERNAME>.github.io/<REPO>/`, (i.e. your repository is at `https://github.com/<USERNAME>/<REPO>`), set `baseUrl` to `"/<REPO>/"`. For example, if your repo name is "my-project", your `vue.config.js` should look like this:
45
43
46
-
module.exports= {
47
-
baseUrl:process.env.NODE_ENV==='production'
48
-
?'/yourProjectName/'
49
-
:'/',
50
-
outputDir:'docs'
51
-
}
52
-
```
44
+
```js
45
+
module.exports= {
46
+
baseUrl:process.env.NODE_ENV==='production'
47
+
?'/my-project/'
48
+
:'/'
49
+
}
50
+
```
51
+
52
+
2. Inside your project, create `deploy.sh`with the following content (with highlighted lines uncommented appropriately) and run it to deploy:
53
+
54
+
``` bash{13,20,23}
55
+
#!/usr/bin/env sh
56
+
57
+
# abort on errors
58
+
set -e
59
+
60
+
# build
61
+
npm run docs:build
62
+
63
+
# navigate into the build output directory
64
+
cd docs/.vuepress/dist
65
+
66
+
# if you are deploying to a custom domain
67
+
# echo 'www.example.com' > CNAME
68
+
69
+
git init
70
+
git add -A
71
+
git commit -m 'deploy'
72
+
73
+
# if you are deploying to https://<USERNAME>.github.io
Generate the production build in `docs` directory with `npm run build`. Commit the `vue.config.js` file and the built files `docs/*`, then push to your repository's `master` branch. On GitHub, configure your repository's setting to [Publish your GitHub Pages site from a `docs` folder on your `master` branch](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch)
76
+
# if you are deploying to https://<USERNAME>.github.io/<REPO>
You can also run the above script in your CI setup to enable automatic deployment on each push.
84
+
:::
55
85
56
86
### GitLab Pages
57
87
@@ -94,18 +124,19 @@ Commit both the `.gitlab-ci.yml` and `vue.config.js` files before pushing to you
94
124
95
125
### Netlify
96
126
97
-
> TODO | Open to contribution.
127
+
1. On Netlify, setup up a new project from GitHub with the following settings:
128
+
129
+
- **Build Command:** `npm run build` or `yarn build`
130
+
- **Publish directory:** `dist`
131
+
132
+
2. Hit the deploy button!
98
133
99
134
Also checkout [vue-cli-plugin-netlify-lambda](https://github.com/netlify/vue-cli-plugin-netlify-lambda).
100
135
101
136
### Amazon S3
102
137
103
138
See [vue-cli-plugin-s3-deploy](https://github.com/multiplegeorges/vue-cli-plugin-s3-deploy).
104
139
105
-
### Azure
106
-
107
-
> TODO | Open to contribution.
108
-
109
140
### Firebase
110
141
111
142
Create a new Firebase project on your [Firebase console](https://console.firebase.google.com). Please refer to this [documentation](https://firebase.google.com/docs/web/setup) on how to setup your project.
@@ -167,7 +198,7 @@ If you want other Firebase CLI features you use on your project to be deployed,
167
198
168
199
You can now access your project on `https://<YOUR-PROJECT-ID>.firebaseapp.com`.
169
200
170
-
Please refer on the [Firebase Documentation](https://firebase.google.com/docs/hosting/deploying) for more details.
201
+
Please refer to the [Firebase Documentation](https://firebase.google.com/docs/hosting/deploying) for more details.
171
202
172
203
### Now
173
204
@@ -183,7 +214,7 @@ Please refer on the [Firebase Documentation](https://firebase.google.com/docs/ho
183
214
184
215
### Surge
185
216
186
-
To deploy with [Surge](http://surge.sh/) the steps are very straightforward.
217
+
To deploy with [Surge](http://surge.sh/) the steps are very straightforward.
187
218
188
219
First you would need to build your project by running `npm run build`. Andif you haven't installed Surge's command line tool, you can simply do so by running the command:
189
220
@@ -193,7 +224,7 @@ npm install --global surge
193
224
194
225
Then cd into the `dist/` folder of your project and then run `surge` and follow the screenprompt. It will ask you to set up email and password if it is the first time you are using Surge. Confirm the project folder and type in your preferred domain and watch your project being deployed such as below.
0 commit comments