博客列表 >纯静态文件打包部署预览链接,来自于vue的cli官方文件,使用的是yarn

纯静态文件打包部署预览链接,来自于vue的cli官方文件,使用的是yarn

南瓜又个梦
南瓜又个梦原创
2021年11月12日 23:12:33654浏览

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

这是手动更新的配置,可以有另外自动更新的配置
1,命令行
yarn build

2.
点链接,语言切换成中文

build成功后的链接

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

  1. yarn global add serve
  2. serve -s dist
  3. //这两行是确保dist目录打包好了

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

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

  1. module.exports = {
  2. publicPath: process.env.NODE_ENV === 'production'
  3. ? '/my-project/' //生产环境的名称
  4. : '/' //
  5. }

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

  1. #!/usr/bin/env sh
  2. # 当发生错误时中止脚本
  3. set -e
  4. # 构建
  5. npm run build
  6. # cd 到构建输出的目录下
  7. cd dist
  8. # 部署到自定义域域名
  9. # echo 'www.example.com' > CNAME
  10. git init
  11. git add -A
  12. git commit -m 'deploy'
  13. # 部署到 https://<USERNAME>.github.io
  14. # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
  15. # 部署到 https://<USERNAME>.github.io/<REPO>
  16. # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
  17. cd -

然后执行deploy.sh

  1. //需要配置好环境gitbash,cmder
  2. sh deploy.sh
  3. //会运行文件里的命令
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议