构建并发布dist文件夹到github页面

问题描述：

我使用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页面

相关推荐