Visual studio code 从Visual Studio代码将Vue.js应用程序部署为Azure应用程序服务

我有一个Vue.js应用程序。此应用程序是使用创建的。此时，这是一个基本的“hello world”应用程序。我在本地计算机上运行此应用程序。我使用Visual Studio代码中的终端窗口中的

npm run service

运行它。我现在正尝试将此应用程序从Visual Studio代码部署到Azure应用程序服务

我已创建Azure应用程序服务。我还安装了。在VisualStudio代码中的“终端”窗口中，我输入了“npm运行构建”。这创建了一个名为“dist”的目录。然后右键单击该目录并选择“部署到Web应用…”。然后，我选择我的订阅和应用程序服务名称并选择“部署”。我看到一个提示，上面写着“部署到”。然后我单击“浏览网站”按钮。这将启动一个浏览器窗口。在浏览器中，我看到一个启动屏幕，上面写着“嗨，节点开发人员！“然而，我本来希望看到我的Node.js应用程序。我错过了什么

---

在尝试部署此应用程序时，我从“终端”窗口运行了

npm run build

。这创建了一个“dist”目录。

请参考Microsoft文档。

否则，您可以尝试通过FTP手动部署。您可以通过转到Azure门户：

App Service=>Deployment Center=>FTP=>Dashboard

---

然后，您将在该页面上找到一些FTPS凭据，您所要做的就是将您的

dist

文件夹部署到

/site/wwwroot

，请参阅更多。

由于Azure更新了它的一些功能，官方文档不太清晰，许多教程不再有效。我尝试直接部署

dist

文件夹根据我的API请求，der

/site/wwwroot

未正常运行

经过一番挖掘，我终于将我的vue.js应用程序成功部署到Azure应用程序服务上，实现了路由和API请求

这里的关键是在Azure应用程序服务上部署SPA作为静态网站。因为Azure将静态网站定义为

“静态站点通常是使用Angular、React或Vue编写的单页应用程序（或SPA）。无论您如何设计应用程序，您都可以直接从存储中托管和提供这些文件，而不是使用web服务器。在存储中托管比维护web服务器更简单、成本更低。”

按照下面的链接并使用Azure存储和VSCode应该可以完成这项工作。

---

你能导航到并转到调试控制台>cmd吗？你的站点文件会显示在这里吗？@BryanTrach MSFT当我访问

sitename.scm.azurewebsites.net

时，我没有调试控制台>cmd选项。相反，我有“Environment”、“SSH”和“Bash”“。我怀疑您指的是Windows上的应用程序服务，但这显然是Linux上的应用程序服务。”。当我使用bashshell时，我看到一个名为“site”的目录。在“site”的内部，我看到一个名为“wwwroot”的目录。在“wwwroot”中，我看到了我的文件。Azure存储是另一种产品。虽然它将为您的静态SPA提供服务（因为它有一个web服务器），但问题是您无法将自定义域指向它。在官方文档中，它声明您可以将自定义域映射到Azure博客存储。我确实在使用博客存储将Vue部署到Azure上时遇到了更多问题。因此，我后来改为使用Azure Devops，设置CI/CD管道/发布，并连接到Azure应用程序服务。