目录
- 什么是GitHub Pages？
- 为什么选择GitHub Pages托管Vue.js？
- 环境准备
- 创建Vue.js应用
- 配置Vue.js应用以支持GitHub Pages
- 部署Vue.js到GitHub Pages
- 常见问题解答
- 总结
什么是GitHub Pages？
GitHub Pages 是一种托管服务，可以将静态网页直接托管在GitHub上。它非常适合个人项目、简历或小型网站。用户只需将HTML、CSS和JavaScript文件上传到特定的分支，便可轻松获取一个网页链接。
为什么选择GitHub Pages托管Vue.js？
选择使用GitHub Pages 来托管 Vue.js 应用的原因包括：
- 免费：GitHub Pages提供免费的托管服务。
- 简单易用：不需要额外的服务器配置。
- 与GitHub无缝集成：方便代码管理和版本控制。
- 支持HTTPS：自动为所有的GitHub Pages网站启用HTTPS。
环境准备
在开始之前，确保你的计算机上已经安装了以下工具：
可以通过以下命令安装Vue CLI： bash npm install -g @vue/cli
创建Vue.js应用
-
创建项目：使用Vue CLI创建一个新的项目。 bash vue create my-vue-app
根据提示选择默认配置。
-
进入项目目录： bash cd my-vue-app
-
运行开发服务器： bash npm run serve
访问
http://localhost:8080，确保应用能够正常运行。
配置Vue.js应用以支持GitHub Pages
要使Vue应用在GitHub Pages上正常工作，需要在vue.config.js中添加配置。首先在项目根目录下创建 vue.config.js 文件，并添加以下内容： javascript module.exports = { publicPath: process.env.NODE_ENV === ‘production’ ? ‘/my-vue-app/’ : ‘/’} 请确保将 /my-vue-app/ 替换为你的 GitHub 仓库名。
部署Vue.js到GitHub Pages
-
构建项目：运行构建命令，生成可部署的静态文件。 bash npm run build
生成的文件会放在
dist文件夹中。 -
安装gh-pages：使用npm安装
gh-pages包。 bash npm install gh-pages –save-dev -
更新package.json：在
package.json文件中添加以下命令：”scripts”: { “deploy”: “gh-pages -d dist
