Netlify is a great platform for vue apps. You can simply do a git push, and they will automatically build and deploy it for you. They also have a great free tier available.
Deploying Vue on Netlify is mostly straightforward:
For this example I’m going to use Vue CLI, so make sure have that installed.
vue create vue-sample
I chose the default settings and used npm as package manager.
After it was created you can run the sample with
cd vue-sample npm run serve
Netlify can deploy from Github, Bitbucket or GitLab, so push your code to one of those. Then its time to create a new site with Netlify:
Choose your repo, then continue to the main settings:
The build command is what Netify will run after code is pushed.
npm run build will put the generate files under the
dist/ folder, so we tell Netlify to publish that directory.
At this point your site will be live, and even better a new version will automatically be deployed every time to push to master! There are some last steps though to get everything working.
While the homepage works nicely, at the moment going directly to any inner page will result in a 404. To fix this lets first create a route to see the issue:
vue add router
Commit and push these changes to master, and Netlify will deploy the new version automatically. You should see an About link at the top of your site:
If you refresh the page directly though you currently get an 404.
To fix we need to setup custom rewrite rule. Create a file named
_redirects under the
public/ folder with the following contents:
/* /index.html 200
This will effectively serve the index.html for any route under your site. Putting it in the
public/directory means it will end up in
npm run build, which is what we want.
Now push this to master and you are done!
Originally posted at https://loftie.com/post/deploying-vue-with-netlify-from-scratch