土豆炒青椒

想到什么写什么。。。

小白也能用heroku发布免费app (2)

發布於
搞定heroku部署Python Flask小app后,用heroku部署NodeJS Vue小app就是小case😁

1 工具准备

GitHub账号
Heroku账号(可以发布5个免费小app)
VS Code
Postman


2 环境准备

安装Vue之前,确保这三个玩意已安装:brew,node,npm。开动之前记得检查:

brew --version
node --version
npm --version


3 安装Vue

三大主流前端框架:angular,react和vue,好像还是vue最好上手。

npm install vue
npm install -g @vue/cli

安装完毕,记得检查有没有安装成功:

vue --version


4 正式开动

4.1 创建项目文件夹

vue create <app-name>

这时会弹出一个选项框,要选择是创建vue2还是vue3,我们当然选择vue3啦

给电脑一点时间,过一会所在目录下就会出现一个名为<app-name>的文件夹,那就是我们刚刚创建的vue项目。

点击进入名为<app-name>的文件夹,看见项目需要的一切文件已经安装好了。


4.2 更改一下dev模式的启动命令

不做任何修改,在本机跑的默认命令是npm run serve。为了可以在heroku上运作,我们需要对项目根目录的package.json文件稍作修改。

把原本代码
"serve": "vue-cli-service serve",
改为start就好
"start": "vue-cli-service serve",

修改完成后,记得看看修改是否成功:

npm start

运作成功应该可以在浏览器内看到localhost:8080下的默认vue欢迎页面

一切就绪后,参照官方教程做想做小网站吧……

……

……

……


5 准备发布heroku

比pytho flask的步骤简单多了。

5.1 在根目录创建static.json文件

touch static.json

static.json 文件内容为:

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


5.2 导出vue最终成品

退出dev模式后,在终端输入:

npm run build

运行完毕后,会发现根目录下多了一个dist文件夹,那就是我们的vue小app成品文件。


5.3 在heroku配置相关参数

nodejs vue小app有两个buildpacks需要添加:

heroku/nodejs
https://github.com/heroku/heroku-buildpack-static

还是有两种方法供选择:

  • 有安装heroku cli
heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static
  • 没有安装heroku cli,在heroku账号对应app的setting栏目下设置。

……




折腾完以上5大步骤后,就可以发布了。上传GitHub,heroku一键部署。

以上过程参考教程即可,不出意外基本上一次成功。此教程靠谱,一篇解决所有基础问题,完全不需要Google搜答案。我的总结基本上就是此教程的汉化版。

heroku除了发布免费app,还提供免费小型数据库。全部都有了,happy coding😏。

喜歡我的文章嗎?
別忘了給點支持與讚賞,讓我知道創作的路上有你陪伴。

CC BY-NC-ND 2.0 版權聲明

小白也能用heroku发布免费app

2

看不過癮?

一鍵登入,即可加入全球最優質中文創作社區