github中新建项目
-
my-web (编写vue项目代码)
-
myWebOnline(存放Vue打包后的dist包里面的文件)
发布流程
(假设my-web项目已经编写完成)Vue-cli
my-web
-
vue.config.js文件中
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, publicPath: process.env.NODE_ENV === 'production' ? '/myWebOnline/' // *** 注意修改文件名 : '/' })
-
项目根目录里新建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 -
-
npm run build
myWebOnline
-
将dist文件夹中所有文件复制到本项目中
-
git add .
-
git commit -m "write something"
-
git push origin main
github 页面配置
注意事项
-
发布完静等更新即可,一般两三分钟
-
每次重新push之后无需有其他操作,静等更新即可
-
vue项目中路由模式推荐为 hash
-
以上针对vue-cli创建的项目
非脚手架项目
-
在原项目中build然后发布
-
配置githubPage即可(无需新建新的项目)