如何将Vue3.0项目部署到Heroku

作为一个专业薅羊毛的人，连Github Education都不放过的人

励志将每个权益发挥到极致

本篇文章介绍如何将Vue项目发布到Heroku，当然本文以Vue为例，还可以部署React或者其他的web项目，当然如果你需要，后端服务也可以

Heroku平台

Heroku平台的灵活性极高且支持多种编程语言。若想把程序部署到Heroku上,开发者要使用Git把程序推送到Heroku的Git服务器上。在服务器上,git push命令会自动触发安装、配置和部署程序。

Heroku使用名为Dyno的计算单元衡量用量,并以此为依据收取服务费用。最常用的Dyno类型是Web Dyno,表示一个Web服务器实例。程序可以通过使用更多的Web Dyno以增强其请求处理能力。另一种Dyno类型是Worker Dyno,用来执行后台作业或其他辅助任务。

Heroku提供了大量的插件和扩展,可用于数据库、电子邮件支持和其他很多服务。

非常重要的一点，作为个人用户和普通开发者来说，他是完全免费的，缺点就在于是*服务，可能访问会比较慢

访问heroku.com注册就好啦

1. 安装 Heroku CLI

根据官方文档安装Heroku CLI

2. 创建 static.json 文件：

{
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

root是指web项目所在的根文件夹，默认为dist如果在vue.config.js中修改过outputDir则需要注意

3. 将 static.json 加入 Git

git add static.json
git commit -m "add static configuration"

4. 部署到 Heroku

heroku login
heroku create
heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static
git push heroku main

这里注意一点,为了避免引起某些种族歧视话题，GitHub修改了git默认分支master=>main

提交时请注意提交分支名称，对git旧项目可能还是master

这样我们就等待heroku发布，就可以访问啦

下面是一个demo

https://dry-plains-50389.herokuapp.com/

emm

当然可以绑定自己的域名

http://nano-vue.uno.moe/