link1918 link1919 link1920 link1921 link1922 link1923 link1924 link1925 link1926 link1927 link1928 link1929 link1930 link1931 link1932 link1933 link1934 link1935 link1936 link1937 link1938 link1939 link1940 link1941 link1942 link1943 link1944 link1945 link1946 link1947 link1948 link1949 link1950 link1951 link1952 link1953 link1954 link1955 link1956 link1957 link1958 link1959 link1960 link1961 link1962 link1963 link1964 link1965 link1966 link1967 link1968 link1969 link1970 link1971 link1972 link1973 link1974 link1975 link1976 link1977 link1978 link1979 link1980 link1981 link1982 link1983 link1984 link1985 link1986 link1987 link1988 link1989 link1990 link1991 link1992 link1993 link1994 link1995 link1996 link1997 link1998 link1999 link2000 link2001 link2002 link2003 link2004 link2005 link2006 link2007 link2008 link2009 link2010 link2011 link2012 link2013 link2014 link2015 link2016 link2017 link2018 link2019 link2020 link2021 link2022 link2023 link2024 link2025 link2026 link2027 link2028 link2029 link2030 link2031 link2032 link2033 link2034 link2035 link2036 link2037 link2038 link2039 link2040 link2041 link2042 link2043 link2044 link2045 link2046 link2047 link2048 link2049 link2050 link2051 link2052 link2053 link2054

[Vue.js] build and publish dist folder to github pages Subscribe to RSS

I created a project with Vue.js and Vuetify using the vue.js CLI. I would like to host this application with Github Pages. So I took a guide from here

https://help.github.com/en/articles/configuring-a-publishing-source-for-github-pages#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch

and when not using the history moute of the vue.js Router (https://router.vuejs.org/guide/essentials/history-mode.html) to make sure I don’t need a server.

I created a build of my project and renamed the generated dist folder to docs. This docs folder is placed in the root directory (where it was generated). When I select master branch /docs folder as my Github Pages publishing source I get a blank white page.

When I check the console I get a

Failed to load resource: the server responded with a status of 404 ()

for each file generated in the dist/docs folder. What am I missing?

Solution :

This could be that the root path of the app is set to look at the root of the github instead of the root of the repository.

It also looks like you are using vue-cli-3 from the tags. So here is what there is done for deploying a vue.js app to be hosted on github pages.

Create a vue.config.js file in the root of the app.
In that file, set the public path to match the repository name.

module.exports = {
publicPath: process.env.NODE_ENV === ‘production’ ? ‘/YOUR_REPO_NAME/‘ : ‘/‘
}

Create a deploy.sh file in the root of the app.
In the file, write the following

set -e

npm run build

cd dist

git init
git add -A
git commit -m ‘deploy’

git push -f git@github.com:YOUR_USER_NAME/REPOSITORY_NAME.git master:gh-pages

cd -

Now from the command line, in the root of the app, you can run sh deploy.sh. This will run the build command for vue-cli, go into the dist folder, commit those files and push them to the gh-pages branch.
Then you can set the github repo to use gh-pages instead of docs. Since you mentioned you are not using history mode for vue-router, you should see the # in the URL string and it will work when a user refreshed the page on a different route other than home.

Hope that helps point you in the right direction for deploying and hosting the vue.js app on github pages.