前言 本篇在讲什么 简单讲解关于Vue发布github静态页面相关的内容 本篇适合什么 适合初学Vue的小白 适合想要自己搭建网站的新手 本篇需要什么 对Html和css语法有简单认知 对Vue有简单认知 Node.js(博主v18.13.0)的开发环境 Npm(博主v8.19.3)的开发环境 Vue(博主v5.0.8)的开发环境 依赖VS code编辑器 需要一个github账号 本篇的特色 具有全流程的图文教学 重实践，轻理论，快速上手 提供全流程的源码内容

---

★提高阅读体验★ 👉 ♠ 一级标题 👈 👉 ♥ 二级标题 👈 👉 ♣ 三级标题 👈 👉 ♦ 四级标题 👈

---

---

♠ 配置发布环境

♥配置vue.config.js

对于目前我们静态页面发布只需要简单的去修改vue.config.js文件即可

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   // 基本路径
   publicPath: './',
   // 输出文件目录
   outputDir: 'dist',
   configureWebpack: {
     externals: {
     }
   },
   transpileDependencies: true
})

文件内容修改成上述所示即可

---

♥ build

在vs code执行打包命令npm run build，等待发布完成，build完成后会在工作目录下生成目录dist

---

♥ 本地运行

首先确保你的vs code安装插件Live Server，没装的装一下

找到dist目录下的index.html文件，右键Open with Live Server，就可以在浏览器中打开了

---

♠ 发布到github

将我们的静态页面上传到github的仓库上，可以通过公网IP直接访问页面

---

♥ 创建仓库

首先登录github账号创建一个空的仓库

---

♥ 上传资源代码

将我们刚刚发布的整个dist文件夹内的东西都上传到我们的新仓库里面

---

♥ 设置Github pages

回到我们的仓库里，找到Setting下的Pages，将Branch设置为main，记得点击Save

---

♥ 访问页面

Save之后会在页面上显示一个地址，直接访问改地址，就可以看到我们的页面了

♠ 推送

• Github

https://github.com/KingSun5

---

♠ 结语

vue建站这一章到这里就完了，后边有做出来成品了再放出来看看，若是觉得博主的文章写的不错，不妨关注一下博主，点赞一下博文，另博主能力有限，若文中有出现什么错误的地方，欢迎各位评论指摘。

👉 本文属于原创文章，转载请评论留言，并在转载文章头部著名作者出处👈