github发布vue静态页面_github发布vue网页-优快云博客

本文链接：https://blog.youkuaiyun.com/ory001/article/details/121241920

本文档详细介绍了如何在GitHub上发布Vue项目的静态页面，包括创建gh-pages分支和两种发布代码的方法：手动发布及使用gh-pages插件。通过配置package.json文件，可以便捷地执行部署脚本，将Vue应用发布到GitHub Pages。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

github发布vue静态页面

文章目录

github发布vue静态页面

一、创建gh-pages分支

静态页面

二、发布代码

1.手动发布

npm run build
cd dist
git init
git add -A
git commit -m "deploy"
git remote add origin git@github.com:ouruyi/vue-demo.git
git push -f origin master:gh-pages

2.使用gh-pages插件发布(推荐)

安装gh-pages依赖包

npm install gh-pages -D

package.json

编辑package.json文件，增加predeploy和deploy脚本，同时在最外层增加仓库地址"homepage": "https://github.com/ouruyi/vue-demo"，完整代码如下：

{
  "name": "vue-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "predeploy":"npm run build",
    "deploy":"gh-pages -d dist -b gh-pages"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "gh-pages": "^3.2.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "homepage": "https://github.com/ouruyi/vue-demo"
}