如何成功部署我的 Vue 应用程序？ (CLI3)

Posted 2023-02-22

【中文标题】如何成功部署我的 Vue 应用程序？ (CLI3)

【英文标题】：How to successfully deploy my Vue app? (CLI3)

【发布时间】：2019-06-21 10:10:08

【问题描述】：

This answer 声明 npm run build 创建了一个 dist 文件夹（在我的情况下是这样）以及一个 index.html 文件 - 在我的情况下没有。

相反，我的dist 文件夹中有一个index.html 文件，我将此文件夹上传到我的远程服务器，在我的浏览器中访问index.html 会显示一个空白页面，顶部有“Hello world”（没有CSS , 没有 JS)。

我在the docs 中找不到解决此问题的任何内容。

我错过了什么吗？为什么我的应用在部署后会变成一个“Hello world”页面？

【问题讨论】：

检查您的控制台是否有错误（例如，404s 用于丢失文件）。还要通过检查源面板来验证您实际上是在查看您的 Vue 应用程序。

【参考方案1】：

如果你使用 vue-cli，要创建 dist 文件夹，你需要运行 npm run build。 另外，打开你的 package.json 并检查你的脚本对象。它将运行各种命令，您可以选择正确的脚本来运行。

"scripts": 
 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "lint": "vue-cli-service lint"
,

对于 vue cli3，大多需要运行 npm run build。

【讨论】：

天哪，对不起，我想写 build 而不是 serve。我确实运行了npm run build，而不是npm run serve。我更新了我的问题。