以Vue项目为例
本地预览
yarn build
之后会有一个dist目录
这时需要安装serve(原来的yarn serve是监听src目录的)去监听dist目录 yarn global add serve
,执行 serve -s dist
,端口就会发生变化,你会发现该端口内的css、js等文件都是打包好的,这两句命令就是检查dist是否正确打包。
GitHub页面
1、如果要推送到GitHub,要在GitHub新建一个仓库,用于预览(原仓库放源代码),并在vue.config.js中设置正确的publicPath。
如果要部署到https://<USERNAME>.github.io/,则可以省略,publicPath因为它默认为"/"。
如果要部署到预览仓库,请设置publicPath为"/<REPO>/"。例如,如果你的仓库名称是“ my-project”,则vue.config.js配置应如下所示:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/my-project/'
: '/'
}
2、在项目中,deploy.sh使用以下内容创建并运行以进行部署:
#!/usr/bin/env sh
# 当发生错误时终止脚本
set -e
# 构建
yarn 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:<USERNAME>/<REPO>.git master:gh-pages
cd -
需要注意git@github.com:<USERNAME>/<REPO>.git,这部分内容应更换为新仓库地址
部署sh deploy.sh
Gitee页面
只需要把deploy.sh中如下图部分的地址换成码云的就行了
image.png
网友评论