将 Vue.js 应用部署到 Heroku

先决条件：

• Git
• 节点
• Vue CLI
• Heroku CLI
• 免费 Heroku 账户

首先，使用 Vue CLI 生成一个新的 Vue 应用：

vue create <app-name>

如果命令行提示选择预设值，请选择默认值。

cd <app-name>

现在你已经进入了新的项目目录，让我们运行一下这个应用，确保一切运行正常。不过首先，我喜欢统一使用`npm start`来启动我的 Web 应用，Heroku 也是如此。遗憾的是，初始化 Vue 应用时，启动命令有所不同（`npm run serve`）。我们来快速修改一下。在你的项目文件夹中，打开`package.json`文件。

脚本中包含的花括号块表示其右侧命令的别名。只需将`serve`替换为`start`即可。最终结果应该类似于这样：

{
  "name": "vue-heroku",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
.
.
.
}

让我们回到终端运行以下命令来试试：

npm start

访问http://localhost:8080，您应该会看到 Vue 生成的应用程序。

接下来，我们的 Vue 应用是一个简单的纯前端应用。我们可以通过服务器来部署它，也可以静态地提供构建文件。我们选择第二种方案，它要简单得多。

您只需在项目中添加一个文件，并在 Heroku 上创建一个构建包即可。在项目仓库的根目录下创建一个名为static.json的文件，并将以下内容添加到该文件中（官方来源）：

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

至此，我们的项目编辑工作已完成。我们可以通过以下方式将更改提交到 Git：

git add . && git commit -m "Heroku config"

让我们创建一个生产环境版本：

npm run build

最后，我们来看看 Heroku。假设您已经安装了 Heroku CLI，请运行：
heroku login

按下任意键，即可打开浏览器窗口进行登录：

我们已准备好使用 CLI 创建一个新的 Heroku 应用。运行：

heroku create

非常重要的一步是运行以下两个命令：

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

这将允许 Heroku 将我们的应用程序作为静态应用程序提供服务。

现在我们终于可以执行部署命令了：

git push heroku master

访问远程 URL，您应该就能看到您的 Vue 应用了。

这是我的。您还可以在 Heroku 控制面板中找到已部署的应用，其中包含许多有用的信息，如果您想了解更多信息，可以查看控制面板。以下是我的控制面板示例，供您参考：

这里是包含本文所使用的 Vue 应用及其所有修改的Github 代码库的链接。

感谢您的访问，请继续阅读！

原文链接：https://medium.com/better-programming/deploying-a-vue-js-app-to-heroku-d16f95c07a04