码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • GitHub | 在 GitHub 上在线展示 Vue 项目


    Step1:在 GitHub 上新建仓库,并将 Vue 项目的代码 push 到该仓库中。坑点在于,如果你是从 GitHub 上 clone 的别人的项目,那么在使用 git 时,需要修改 origin 的 URL 地址为你自己仓库的地址,代码如下。

    git remote set-url origin git@github.com:<你自己仓库的SSH地址>
    我就差点提交到别人的仓库去了 TT

    Step2:如果此前你从来没有对项目进行 build(构建)的话,那么是不会有这个 dist 目录的(如下)而要想使用 GitHub Pages 功能在线展示项目网页,这个 dist 目录又是必不可少的。

    因此,我们需要 build 项目,并将生成的 dist 目录上传到 GitHub 仓库中。

    Step3:在使用 npm run build 时可能报错 “npm ERR! missing script: build”,这是因为你的项目没有定义名为 “build” 的脚本。因此,到项目中的 package.json 文件中查看现有的脚本:

    比如,我的项目中定义的 build 脚本如上,那么我应该输入命令:

    npm run build:prod
    我随便选的,因为第一个看起来更正常。

    Step4:build 完毕后,我们将得到 Step2 中展示的 dist 目录,里面装有一个 HTML 页面和一些静态资源。

    如果你点开 index.html,发现是一片空白,那么可能需要修改项目中的 vue.config.js 文件,如下图所示。

    我这里原本是 publicPath: "/",少了一个点,修改后再打包,最终 HTML 显示成功。如果你没有这一行,那么可能需要添加上去(我刷到过其他博客是这样解决的)

    Step5:如果 index.html 显示成功了,那么我们就可以把 dist 目录上传到仓库中了(实测手动上传的方法治标不治本,建议采取后面一种方法)。

    在跳转后的页面,把 dist 目录拖拽进去,最后 commit 即可。

  • 相关阅读:
    图论的小技巧以及扩展
    新版idea配置maven注意点!!
    全流量安全分析之服务器非法外连
    算法题:分别用c++/python/java实现回文数
    2652. 倍数求和
    【线性代数 & C++】结合逆矩阵的克拉默法则
    【算法笔记自学】第 10 章 提高篇(4)——图算法专题
    CompletableFuture异步编排(两任务组合——两个任务必须都完成才触发另一个任务 )
    Linux学习-28-用户间切换相关命令
    uniapp小程序刮刮乐抽奖
  • 原文地址:https://blog.csdn.net/qq_36388797/article/details/136277440
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号