---
# System prepended metadata

title: HeroKu Vue 部署 Deploy
tags: [Tag(我的筆記!)]

---

# HeroKu Vue 部署 Deploy

###### tags: `Tag(我的筆記!)`

### 第一步驟 
```
$vue create heroku-practice
```


### 第二步驟 (npm 跟 yarn 只能選一個，不然會無法上傳heroku)

```
$npm run build

$yarn build
```

### 第三步驟

將dist檔案從.gitignore檔案刪除或註解掉，繞dist檔可以加入git控管
![](https://i.imgur.com/lze443b.png)


### 第四步驟

於專案中新增 static.json 檔案，參考來源為 Vue [官方文件](https://cli.vuejs.org/zh/guide/deployment.html#%E9%80%9A%E7%94%A8%E6%8C%87%E5%8D%97)
```
{
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}
```

### 第五步驟

更新git版控

```
$git add . 

$git commit -am "make it better"

```

### 第六步驟

用create指令創建Heroku專案
```

$heroku create MyExample-1111

```

> + MyExample-1111專案名稱可自行定義  [color=blue]

- 成功後會得到兩個URL
 - - 第一個為專案部署成功後的網址
 - - 第二個為 Heroku 幫我們建立的遠端 git repo 網址 

```
$heroku buildpacks:add heroku/nodejs
$heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static
```

### 第七步驟

將專案推送到HeroKu

```
$git push heroku master
```


### 第八步驟
利用Heroku open 開啟部屬好的網頁，結案
```
$heroku open
```
<br/>

### 補充

若長時間( 30 分鐘內)沒訪問Heroku將會進入睡眠狀態，會自動休眠，待下一次啟動，啟動時會延遲一些時間。

