如何部署一个vue项目？

Posted 2023-02-22

【中文标题】如何部署一个vue项目？

【英文标题】：How to deploy a vue project?

【发布时间】：2019-01-27 02:51:25

【问题描述】：

几个月来我一直在使用 Vue，我真的很喜欢它。我使用 webstorm 作为编辑器，它具有 Vue 和其他框架的所有预安装模板，使用 Vue 进行开发非常有趣。无论如何，当我决定在 Heroku 上部署应用程序时，它不起作用。当我在本地机器上运行该项目时，它工作正常，但是当我在 Heroku 上部署时，我得到一个空页面。我搜索了解决方案，发现应该有一些我从未拥有过的dist 文件夹，即使在我的本地机器上我也找不到这个文件夹。现在，我有这些文件夹：

我的问题，我是否必须创建 DIST 文件夹并将 index.html 和其他一些文件移到那里？我是否必须运行 npm 构建（我做了，但实际上什么也没发生）。这是我的 p.json：

"scripts": 
        "postinstall": "npm install express",
        "start": "node server.js"
,
      "dependencies": 
        "vue": "^2.5.2"
,

那么我做错了什么以及如何使我的应用程序正常工作？ 谢谢

【问题讨论】：

构建中有什么？听起来你期待魔法发生只是因为它的 vue，你使用什么构建/捆绑工具？什么在服务器等等

npm run build，另见vuejs.org/v2/guide/deployment.html

你在使用这些 Vue 模板吗？ github.com/vuejs-templates

我并不期待任何魔法发生，我只是想知道如何在线部署应用程序。不知何故，在我的机器上，当我运行 npm run 时它工作正常，但是当我推送到 Heroku 时，我有一个空页面。我已经尝试过 npm run 构建，但它什么也没做。

我猜想用命令行而不是编辑器创建 Vue 项目的最佳方式。我只是按照这个答案，我有我需要的how-to-deploy-vue-app

【参考方案1】：

您需要创建最终版本。如果您使用 cli vue 版本 3，则可以使用命令 vue-cli-service build。 链接：https://cli.vuejs.org/guide/build-targets.html#library

构建项目后，您可以下载heroky（或例如surge.sh）中的文件夹dist并在线访问您的站点。

祝你好运。