Nuxt 2 azure 包在构建时突然开始崩溃

Question

我有一个成熟的应用程序，我已经工作了大约两年，直到上周它都工作得非常好。该应用程序使用 Nuxt2 和其他一些 vue2 包。我使用的云平台是Azure。因此我使用

@azure-storage

包。

该项目在本地工作得绝对正常，甚至构建成功生成，但一旦我在天蓝色管道中运行构建，它就开始中断并显示与

@azure/storage

包相关的一些问题。上周这工作得很好，讽刺的是，当我尝试在管道中运行我的旧版本并成功运行时，它们也开始失败。以下是我在 azure pipeline 中收到的错误消息：

错误：-

Nuxt build error
Error in ./node_modules/@azure/core-util/dist/browser/aborterUtils.js 11.12
Module parse failed: Unexpected token (11:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concept#loaders

aborter.abort();
}
options?.abortSignal?.addEventListener("abort", abortHandler);
try{
return await Promise.race(abortablePromiseBuilders.map((p) => p({ abortSignal: aborter.signa;})));

这是 mixin/azure.js 文件中的代码，我在其中导入

@azure/storage

包：

import { BlobServiceClient, AnonymousCredential } from "@azure/storage-blob";

由于它似乎是 webpack 加载器问题，我尝试在依赖项中添加 babel 加载器，甚至在解决方案中添加 babel 加载器，正如提到的一些面临类似加载器问题的问题，但它与 azure 无关。不管怎样我都试过了。但是azure pipeline在运行时仍然失败

nuxt build

。

Package.json 文件：

{
  "name": "dd",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "node ./node_modules/nuxt/bin/nuxt.js start",
    "generate": "nuxt generate",
    "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup",
    "test": "jest"
  },
  "dependencies": {
    "@azure/storage-blob": "12.6.0",
    "@capacitor-community/http": "1.0.0",
    "@capacitor/android": "2.4.6",
    "@capacitor/core": "2.4.6",
    "@ffmpeg-installer/ffmpeg": "1.1.0",
    "@fortawesome/fontawesome-svg-core": "1.2.28",
    "@fortawesome/free-brands-svg-icons": "5.13.0",
    "@fortawesome/free-solid-svg-icons": "5.13.0",
    "@fortawesome/vue-fontawesome": "0.1.10",
    "@mathieustan/vue-datepicker": "0.2.11",
    "@nuxtjs/axios": "5.13.6",
    "@nuxtjs/dotenv": "1.4.1",
    "@nuxtjs/svg": "0.4.0",
    "@vue-stripe/vue-stripe": "4.1.1",
    "axios": "^0.24.0",
    "azure-storage": "2.10.4",
    "capacitor-resources": "2.0.5",
    "cookie": "^0.5.0",
    "cordova-res": "0.15.3",
    "core-js": "^3.15.1",
    "cors": "2.8.5",
    "cropperjs": "1.5.9",
    "crypto-js": "4.0.0",
    "debounce": "1.2.0",
    "dotenv": "^16.0.0",
    "express": "^4.18.0",
    "fluent-ffmpeg": "2.1.2",
    "jquery": "1.9.1",
    "js-cookie": "^3.0.1",
    "lodash": "4.17.21",
    "lru-cache": "6.0.0",
    "luxon": "1.25.0",
    "masonry-layout": "4.2.2",
    "moment": "2.9.0",
    "moment-timezone": "0.5.33",
    "number-abbreviate": "2.0.0",
    "nuxt": "^2.15.7",
    "nuxt-start": "^2.15.8",
    "photoswipe": "5.2.4",
    "push-dir": "^0.4.1",
    "rxjs": "6.6.3",
    "simple-vue-validator": "0.16.0",
    "underscore": "1.13.1",
    "v-datatable-light": "0.8.2",
    "v-lazy-image": "1.4.0",
    "video-metadata-thumbnails": "1.0.22",
    "vue-cal": "^3.10.4",
    "vue-datatables-net": "1.4.1",
    "vue-datetime": "1.0.0-beta.13",
    "vue-quill-editor": "3.0.6",
    "vue-rx": "6.2.0",
    "vue-scroll": "2.1.13",
    "vue-select": "3.10.3",
    "vue-svg-loader": "0.16.0",
    "vue-tables-2": "2.3.1",
    "vue-the-mask": "0.11.1",
    "vue-tippy": "4.7.2",
    "vue-toast-notification": "0.4.1",
    "vue2-datepicker": "3.8.2",
    "vue2-google-maps": "0.10.7",
    "vue2-timepicker": "1.1.6",
    "vue3-gmap-custom-marker": "^0.0.5",
    "vuejs-clipper": "3.0.3",
    "vuejs-datepicker": "1.6.2",
    "vuetable-2": "2.0.0-beta.4",
    "vuex": "3.4.0",
    "vuex-persistedstate": "3.0.1",
    "weekstart": "1.0.1"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.2.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^27.0.5",
    "jest": "^27.0.5",
    "vue-jest": "^3.0.4",
    "vue-masonry-css": "1.0.3"
  }
}

我希望能够在 azure pipeline 上成功生成 nuxt build。

Answer 1

为了解决此错误：-

确保您的依赖项（包括

@azure/storage

和

@azure/core-util

）是最新的，以防止出现兼容性问题。检查 Nuxt 项目 中的 Webpack 配置，以正确处理来自

@azure/core-util

的 JavaScript 文件。检查代码、Azure 设置或依赖项中可能导致问题的最新更改。验证您的 Webpack 加载器配置是否包含有效处理 JavaScript 文件的适当设置。

Azure Devops yaml 管道：-

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '14.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm install --save-dev babel-loader @babel/core @babel/preset-env
  displayName: 'Install dependencies'

- script: |
    npm run build
  displayName: 'Build Nuxt application'

输出：-

您还可以使用 Webpack cli 构建您的应用程序：-

参考这个Github问题