vue部署页面为空白页_将项目部署至github和码云

以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://.http://github.io/，则可以省略，publicPath因为它默认为"/"。
如果要部署到预览仓库，请设置publicPath为"//"。例如，如果你的仓库名称是“ 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:/.git，这部分内容应更换为新仓库地址

部署sh deploy.sh

Gitee页面

只需要把deploy.sh中如下图部分的地址换成码云的就行了