7

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

 3 years ago
source link: https://www.joynop.com/p/358.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

如何将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则需要注意

  1. 将 static.json 加入 Git
git add static.json
git commit -m "add static configuration"
  1. 部署到 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/

当然可以绑定自己的域名

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

打赏: 微信收款二维码微信, 支付宝收款二维码支付宝

标签: Vue, Heroku


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK