手动纯静态文件打包部署预览链接(部署到GitHub)，来自于vue的cli官方文件，使用的是yarn

写完项目后，需要部署和发布，这个使用vue@cli搭建的项目，只有前端的静态文件，调用后端的接口，并且是部署到GitHub的话可以使用这个步骤。

注意的点：1，你的gitbash是安装切配置好了的

                 2，每修改一次代码都需要从新push到生产环境里

                 3，这是手动更新的步骤，也是可以自动更新，需要另外的配置

会有两个环境，所以要建两个仓库，一个是放代码的环境，一个是生产环境，代码环境的代码改变就需要bulid，会产生一个新的生产换行，然后会push到存放生产环境的仓库，

1，命令行

 ```  yarn build

 ```

2.

点链接，语言切换成中文


 

 用一个东西监听生成的dist目录

 ~~~

 yarn global add serve

 serve -s dist

 //这两行是确保dist目录打包好了

 ~~~

 安装好后，网页端口变成5000多，打包文件会被压缩，

 

 

3.在 vue.config.js 中设置正确的 publicPath。

~~~

module.exports = {

  publicPath: process.env.NODE_ENV === 'production'

    ? '/my-project/' //生产环境的名称

    : '/'           //

}

~~~

4.在项目里建deploy.sh文件

~~~

#!/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://.github.io

# git push -f git@github.com:/.github.io.git master

# 部署到 https://.github.io/

# git push -f git@github.com:/.git master:gh-pages

cd -

~~~

然后执行deploy.sh

~~~

//需要配置好环境gitbash，cmder

sh deploy.sh

//会运行文件里的命令

~~~

以上是手动纯静态文件打包部署预览链接(部署到GitHub)，来自于vue的cli官方文件，使用的是yarn的详细内容。更多信息请关注PHP中文网其他相关文章！