从 Visual Studio 代码部署 Vue.js 应用作为 Azure 应用服务
Deploy Vue.js App as Azure App Service from Visual Studio Code
我有一个 Vue.js 应用程序。此应用程序是使用 Vue-Cli 创建的。目前，这是一个基本的 "hello world" 应用程序。我的本地机器上有这个应用 运行ning。我 运行 它是通过在 Visual Studio 代码中使用终端 window 中的 npm run serve 实现的。我现在正在尝试将此应用从 Visual Studio 代码部署到 Azure 应用服务。
我创建了一个 Azure 应用服务。我也安装了Azure App Service Visual Studio Code extension。从 "Terminal" window in Visual Studio 代码中，我输入了 "npm run build"。这创建了一个名为 "dist" 的目录。然后我右键单击该目录并选择 "Deploy to Web App..."。然后我选择我的订阅和应用程序服务名称并选择 "Deploy"。我看到一条提示 "Deployment to "。”然后我单击 "Browse Website" 按钮。这将启动浏览器 window。在浏览器中，我看到启动画面显示 "Hey Node developers!"但是，我期待看到我的 Node.js 应用程序。我错过了什么？
为了部署此应用程序，我从 "Terminal" window 运行 npm run build。这创建了一个 "dist" 目录。
请参阅 Microsoft 文档中的 Local Git Deployment。
否则，您可以尝试通过 FTP 手动部署。您可以通过访问您的 Azure 门户来完成此操作：
App Service => Deployment Center => FTP => Dashboard
然后您会在该页面上找到一些 FTPS 凭据，您只需将 dist 文件夹部署到 /site/wwwroot，查看更多 here.
自从 Azure 更新了它的一些功能后，官方文档不是很清楚，许多教程不再有效。我尝试通过 API 请求直接部署 /site/wwwroot 下的 dist 文件夹 无法正常运行。
经过一番挖掘，我最终将我的 vue.js 应用程序成功部署到 Azure App Service 上，并且可以正常运行 routing，和 API 请求.
这里的关键是在 Azure App Service 上将 SPA 部署为静态网站。由于 Azure 将静态网站定义为
"A static site is typically a single-page application (or SPA) written with Angular, React or Vue. However you design the app, you host and serve these files directly from storage rather than using a web server. Hosting in storage is simpler and less expensive than maintaining a web server."
按照下面的 link 并使用 Azure 存储 和 VSCode 应该可以完成工作。
https://docs.microsoft.com/en-us/azure/developer/javascript/tutorial-vscode-static-website-node-01?tabs=bash
我有一个 Vue.js 应用程序。此应用程序是使用 Vue-Cli 创建的。目前，这是一个基本的 "hello world" 应用程序。我的本地机器上有这个应用 运行ning。我 运行 它是通过在 Visual Studio 代码中使用终端 window 中的 npm run serve 实现的。我现在正在尝试将此应用从 Visual Studio 代码部署到 Azure 应用服务。
我创建了一个 Azure 应用服务。我也安装了Azure App Service Visual Studio Code extension。从 "Terminal" window in Visual Studio 代码中，我输入了 "npm run build"。这创建了一个名为 "dist" 的目录。然后我右键单击该目录并选择 "Deploy to Web App..."。然后我选择我的订阅和应用程序服务名称并选择 "Deploy"。我看到一条提示 "Deployment to "。”然后我单击 "Browse Website" 按钮。这将启动浏览器 window。在浏览器中，我看到启动画面显示 "Hey Node developers!"但是，我期待看到我的 Node.js 应用程序。我错过了什么？
为了部署此应用程序，我从 "Terminal" window 运行 npm run build。这创建了一个 "dist" 目录。
请参阅 Microsoft 文档中的 Local Git Deployment。
否则，您可以尝试通过 FTP 手动部署。您可以通过访问您的 Azure 门户来完成此操作：
App Service => Deployment Center => FTP => Dashboard
然后您会在该页面上找到一些 FTPS 凭据，您只需将 dist 文件夹部署到 /site/wwwroot，查看更多 here.
自从 Azure 更新了它的一些功能后，官方文档不是很清楚，许多教程不再有效。我尝试通过 API 请求直接部署 /site/wwwroot 下的 dist 文件夹 无法正常运行。
经过一番挖掘，我最终将我的 vue.js 应用程序成功部署到 Azure App Service 上，并且可以正常运行 routing，和 API 请求.
这里的关键是在 Azure App Service 上将 SPA 部署为静态网站。由于 Azure 将静态网站定义为
"A static site is typically a single-page application (or SPA) written with Angular, React or Vue. However you design the app, you host and serve these files directly from storage rather than using a web server. Hosting in storage is simpler and less expensive than maintaining a web server."
按照下面的 link 并使用 Azure 存储 和 VSCode 应该可以完成工作。
https://docs.microsoft.com/en-us/azure/developer/javascript/tutorial-vscode-static-website-node-01?tabs=bash