构建并发布dist文件夹到github页面 [英] build and publish dist folder to github pages
问题描述
我使用Vue.js创建了一个项目,并使用Vue CLI创建了Vuetify.我想用Github Pages托管这个应用程序.所以我从这里拿了一个指南
I created a project with Vue.js and Vuetify using the Vue CLI. I would like to host this application with Github Pages. So I took a guide from here
我不使用Vue路由器的历史记录( https://router.vuejs.org/guide/essentials/history-mode.html )以确保不需要服务器.
and I am not using the history moute of the Vue Router (https://router.vuejs.org/guide/essentials/history-mode.html) to make sure I don't need a server.
我创建了一个项目构建,并将生成的dist文件夹重命名为docs.此docs文件夹放置在根目录(生成它的位置)中.当我选择主分支/docs文件夹我的Github的页面中发布源我得到一个空白页.
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
无法加载资源:服务器的状态为404()
Failed to load resource: the server responded with a status of 404 ()
用于dist/docs文件夹中生成的每个文件.我想念什么?
for each file generated in the dist/docs folder. What am I missing?
推荐答案
这可能是因为应用程序的根路径设置为查看github的根目录而不是存储库的根目录.
This could be that the root path of your app is set to look at the root of your github instead of the root of the repository.
您似乎也正在使用标记中的vue-cli-3.因此,这就是我为将Vue应用程序部署在github页面上而做的事情.
It also looks like you are using vue-cli-3 from the tags. So here is what I have done for deploying a Vue app to be hosted on github pages.
-
在应用程序的根目录中创建一个
vue.config.js
文件.
在该文件中,设置公共路径以匹配存储库名称.
In that file, set the public path to match the repository name.
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/YOUR_REPO_NAME/' : '/'
}
-
在应用程序的根目录中创建一个
deploy.sh
文件.
在文件中,编写以下内容
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 -
-
现在从命令行在应用程序的根目录中运行
sh deploy.sh
.这将为vue-cli运行build命令,进入dist文件夹,提交这些文件,然后将其推送到gh-pages分支.
Now from the command line, in the root of your 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.
然后,您可以将github存储库设置为使用gh-pages而不是docs.既然您提到过您不在vue-router上使用history
模式,所以您应该在URL字符串中看到#号,并且当用户在除home之外的其他路由上刷新页面时,它会起作用.
Then you can set your 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.
希望能为您指出正确的方向,以便在github页面上部署和托管Vue应用.
Hope that helps point you in the right direction for deploying and hosting your Vue app on github pages.
这篇关于构建并发布dist文件夹到github页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!