当前位置: 首页 > news >正文

githubPage部署Vue项目

github中新建项目

  1. my-web (编写vue项目代码)

  2. myWebOnline(存放Vue打包后的dist包里面的文件)

发布流程

(假设my-web项目已经编写完成)Vue-cli

my-web

  1. vue.config.js文件中

    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,publicPath: process.env.NODE_ENV === 'production'? '/myWebOnline/'   // *** 注意修改文件名: '/'
    })  
  1. 项目根目录里新建deploy.sh

    2.1 注意修改 git push -f git@github.com:ProgrammerMao-001/myWebOnline.git master:gh-pages 中ProgrammerMao-001为你自己github的名称

    #!/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:ProgrammerMao-001/myWebOnline.git master:gh-pages 
    ​
    cd -
  1. npm run build

myWebOnline

  1. 将dist文件夹中所有文件复制到本项目中

  2. git add .

  3. git commit -m "write something"

  4. git push origin main

github 页面配置

注意事项

  1. 发布完静等更新即可,一般两三分钟

  2. 每次重新push之后无需有其他操作,静等更新即可

  3. vue项目中路由模式推荐为 hash

  4. 以上针对vue-cli创建的项目

非脚手架项目

  1. 在原项目中build然后发布

  2. 配置githubPage即可(无需新建新的项目)

http://www.lryc.cn/news/157902.html

相关文章:

  • 【网络编程】网络原来这么简单(更新中)
  • 监控系统典型架构
  • jsp 新能源汽车论坛网Myeclipse开发mysql数据库web结构java编程计算机网页项目
  • Code Snippet的使用
  • 华为云云服务器评测|华为云耀云L搭建zerotier服务测试
  • 企业电脑文件加密系统 / 防泄密软件——「天锐绿盾」
  • 单条视频涨粉50w,逃出大英博物馆背后的逻辑是什么?
  • AIGC(生成式AI)试用 1 -- 基本文本查询
  • php如何处理高并发请求
  • 控制台实现汽车租赁系统
  • 机器学习和数据挖掘03-模型性能评估指标
  • PageNumberPagination、LimitOffsetPagination、CursorPagination
  • 怎么把视频转换成mp4格式
  • 正则判断字符是否包含手机号
  • OSCP系列靶场-Esay-Sumo
  • 本地电脑搭建web服务器、个人博客网站并发布公网访问 【无公网IP】(1)
  • Python基础List列表定义与函数
  • typeScript--[数据定义]
  • 【常见相机模型】
  • 大数据-玩转数据-Flink状态编程(上)
  • 主动获取用户的ColaKey接口
  • C#写一个UDP程序判断延迟并运行在Centos上
  • Kafka核心原理第二弹——更新中
  • 巨人互动|游戏出海H5游戏出海规模如何?
  • 【爬虫】实验项目三:验证码处理与识别
  • 广东成人高考报名将于9月14日开始!
  • pytorch中文文档学习笔记
  • element-ui全局导入与按需引入
  • go 地址 生成唯一索引v2 --chatGPT
  • JSON XML