尝试将 Vue 应用程序部署到 Azure 应用服务，导致错误：找不到模块“../package.json”
P粉269847997
2023-08-31 13:58:53
<p>我有一个简单的 Vue SPA，可以在本地毫无问题地构建和提供服务，但是当我尝试通过 GitHub Actions 构建并部署到 Azure 应用服务时，它只会导致 '<strong>:( 应用程序启动时出现错误</strong>'页面。</p>
<p>下面是几乎默认的工作流程 <code>.yml</code>、应用程序服务配置以及尝试构建应用程序时的错误日志。</p>
<p>我假设这些文件是从 <code>/home/site/wwwroot</code> 的 <code>/dist</code> 文件夹构建的，其中安装了 node_modules 并生成了 package.json ..但它好像不是（检查wwwroot时没有文件，所以构建失败？）</p>
<p>任何帮助将不胜感激，我已经为此坚持了一整天，并且很乐意提供更多信息。我还将 NodeJS 后端部署到应用程序服务，没有太多麻烦，所以我熟悉这个过程 - 只是无法启动这个前端！</p>
<pre class="brush:php;toolbar:false;">name: Build and deploy Node.js app to Azure Web App - shelf-library
on:
push:
branches:
- main
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Set up Node.js version
uses: actions/setup-node@v1
with:
node-version: '16.x'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
- name: Upload artifact for deployment job
uses: actions/upload-artifact@v2
with:
name: node-app
path: dist/
deploy:
runs-on: ubuntu-latest
needs: build
environment:
name: 'Production'
url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
steps:
- name: Download artifact from build job
uses: actions/download-artifact@v2
with:
name: node-app
- name: 'Deploy to Azure Web App'
id: deploy-to-webapp
uses: azure/webapps-deploy@v2
with:
app-name: 'shelf-library'
slot-name: 'Production'
publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_11D7C84BF0CE47B68181C49B9ED47D19 }}
package: .</pre>
检查以下步骤以创建
VueJS并使用 Git Hub 操作部署到 Azure 应用服务。感谢@Anthony Salemo 提供的明确步骤。
在命令提示符下，运行以下命令来创建 Vue 应用程序。
导航到应用程序的根目录
cd myvueapp并运行或
运行
npm run build命令进行生产构建。dist文件夹将被创建。将应用程序推送到 GitHub 存储库。 您可以在我的 GitHub 存储库中查看可用的代码。
我的 GitHub 文件夹结构
应用服务=>部署中心并从 GitHub 中选择代码存储库。配置=>常规设置中添加启动命令。我在 KUDU 控制台中部署的文件夹结构