纯静态文件打包部署预览链接,来自于vue的cli官方文件,使用的是yarn
程序员文章站
2022-03-24 09:31:24
...
会有两个环境,所以要建两个仓库,一个是放代码的环境,一个是生产环境,代码环境的代码改变就需要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://<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 -
然后执行deploy.sh
//需要配置好环境gitbash,cmder
sh deploy.sh
//会运行文件里的命令
上一篇: 自定义方法通过类名获取对象集合