How to build this pro?

[jeasonstudio]

How to build this project with service worker and use github pages?
npm run prod--no-ssl ?
And then?
Thanks for help.

[Narkoleptika]

@jeasonstudio This template wasn't really intended for something like GitHub Pages, However, it is certainly possible to make this work.

As an example, I started with a freshly generated template and made some tweaks to get this
Live Example: https://narkoleptika.github.io/GitHubPage
Source Code: https://github.com/Narkoleptika/GitHubPage

Some Notes:

• GitHub Pages is a static file hosting service. You will lose the server and server side rendering.
• Without a Server or SSR you will need to add <div id="app"></div> as well as a title tag and any meta tags you want to have on the page as the server will not be able to inject them.
• You will need to remove dist/ from your .gitignore and make sure that the index.html and sw.js get generated at the top level of the directory tree. Take a look in webpack.client.config.js
• You will need to change your vue-router mode from history to hash, Otherwise visitors to your page will get a 404 when visiting pages other than /
• You should remove everything related to server the build:server script in your package.json and the reference to it in the build script, prefetch methods on page components, webpack.server.config.js etc.
• In order to build for github you should run npm run build. This will generate a production bundle in ./dist/ and if you follow the above steps ./sw.js and ./index.html You can then push to your github page.
• In the process of removing stuff related to server I lost Hot Module Replacement. I'm not going to invest any further time into investigating this, and will leave it up to you to figure out. For testing, I used npm run prod--no-ssl This runs npm run build and then starts the server.

I will be closing this issue since GitHub Pages isn't the intended purpose of this template, and I feel that I have adequately answered your question.

However, feel free to respond with any further questions you may have! 😃