vue静态网页部署至github page（vite构建）

原创于 2025-09-17 18:50:59 发布 · 376 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #github #前端

原理

当在github上创建一个名为username.github.io的仓库时，github会将https://username.github.io这个url导向所创建仓库中的文件。

其中username是github的用户名。

如此意味着可以将js和css文件上传至该仓库中，在html文件中通过url方式获取这两个文件，就可以实现一个单独的html文件在任意浏览器设备下运行完整网页。

实验

首先在本地创建一个简单的html文件index.html，当按钮被按下时显示hello world。

由于javascript脚本需要从github获取，暂时只在html文件中放一个按钮：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>点我一下</button>
</body>
</html>

下面新建一个javascript文件functions.js，放入一个showalert函数

function showalert() {
    alert("hello world")
}

下面将functions.js上传到刚才创建的github仓库中

用url访问试一下https://username.github.io【username替换为github用户名】

可以看到已经成功了

下面修改html文件，通过url的方式为其添加这个脚本

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://sometky.github.io/functions.js"></script>
  <title>Document</title>
</head>
<body>
  <button onclick="showalert()">点我一下</button>
</body>
</html>

用浏览器打开这个html文件，点击按钮，成功！