githubPage部署Vue项目

github中新建项目

1. my-web （编写vue项目代码）

2. myWebOnline(存放Vue打包后的dist包里面的文件)

发布流程

（假设my-web项目已经编写完成）Vue-cli

my-web

1. vue.config.js文件中

   const { defineConfig } = require('@vue/cli-service')
   module.exports = defineConfig({
     transpileDependencies: true,
     lintOnSave: false,
     publicPath: process.env.NODE_ENV === 'production'
         ? '/myWebOnline/'   // *** 注意修改文件名
         : '/'
   })  

1. 项目根目录里新建deploy.sh

   2.1 注意修改 git push -f git@github.com:ProgrammerMao-001/myWebOnline.git master:gh-pages 中ProgrammerMao-001为你自己github的名称

   #!/usr/bin/env sh
   ​
   # 当发生错误时中止脚本
   set -e
   ​
   # 构建
   npm run build
   ​
   # cd 到构建输出的目录下
   cd dist
   ​
   # 部署到自定义域域名
   # echo 'www.example.com' > CNAME
   ​
   git init
   git add -A
   git commit -m 'deploy'
   ​
   # 部署到 https://<USERNAME>.github.io
   # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
   ​
   # 部署到 https://<USERNAME>.github.io/<REPO>
   git push -f git@github.com:ProgrammerMao-001/myWebOnline.git master:gh-pages 
   ​
   cd -

1. npm run build

myWebOnline

1. 将dist文件夹中所有文件复制到本项目中

2. git add .

3. git commit -m "write something"

4. git push origin main

github 页面配置

注意事项

1. 发布完静等更新即可，一般两三分钟

2. 每次重新push之后无需有其他操作，静等更新即可

3. vue项目中路由模式推荐为 hash

4. 以上针对vue-cli创建的项目

非脚手架项目

1. 在原项目中build然后发布

2. 配置githubPage即可（无需新建新的项目）