Azure Pipeline中无法构建含VueJS的.NET解决方案的解决方法

问题背景 #

我有一个包含30多个项目的大型.NET网站解决方案，其中部分项目集成了VueJS。本地开发环境安装所有依赖后构建正常，但Azure Pipeline构建时遇到问题。
解决方案包含传统WebForms、MVC、DLL库，以及同时基于WebForms/Core/MVC的Vue项目。我希望调整Azure Pipeline，使其能像本地Visual Studio一样构建客户端应用。

本地通过在项目文件或MSBuild脚本中添加以下命令，可正常进行Debug/Release模式构建：

<Target Name="BuildVueClientApp">
  <Message  Text="Performing VueJS build." Importance="high"></Message>
  <CreateItem Include="$(FullModulePath)\Scripts\client-app\**;">
    <Output TaskParameter="Include" ItemName="deleteVueFiles" />
  </CreateItem>
  <Delete ContinueOnError="true" Files="@(deleteVueFiles)"></Delete>
  <Exec Condition="$(Configuration) == 'Debug'" Command="npm run build-dev" />
  <Exec Condition="$(Configuration) == 'Release'" Command="npm run build --prod" />
</Target>

当前Azure Pipeline脚本 #

trigger:
- development

pool:
  vmImage: 'windows-latest'

variables:
  solution: '**/*.sln;-:**\Examples*.sln'
  buildPlatform: 'Any CPU'
  buildConfiguration: 'Release'

steps:
- task: NuGetToolInstaller@1

- task: NuGetCommand@2
  inputs:
    restoreSolution: '$(solution)'

- task: VSBuild@1
  inputs:
    solution: '$(solution)'
    msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:BuildInParallel=true /p:PackageLocation="$(build.artifactStagingDirectory)"'
    platform: '$(buildPlatform)'
    configuration: '$(buildConfiguration)'

- task: VSTest@2
  inputs:
    platform: '$(buildPlatform)'
    configuration: '$(buildConfiguration)'

package.json参考 #

{
  "name": "client-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-dev": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-fallthrough": "off",
      "no-undef": "warn",
      "no-unused-vars": "warn"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

解决方案步骤 #

步骤1：添加Node.js安装任务 #

Azure Pipeline的Windows镜像默认包含Node.js，但需确保版本与本地开发环境一致，避免依赖兼容问题。在NuGet还原后、VSBuild前添加以下任务：

- task: NodeTool@0
  inputs:
    versionSpec: '14.x' # 替换为你本地使用的Node版本
  displayName: 'Install Node.js'

步骤2：安装npm依赖 #

遍历所有包含Vue项目的目录，执行npm install安装依赖。如果是单个Vue项目，可直接指定路径：

- task: CmdLine@2
  inputs:
    script: |
      # 遍历所有client-app目录安装依赖
      for /d %%i in ("$(Build.SourcesDirectory)\**\Scripts\client-app") do (
        cd "%%i"
        npm install
      )
  displayName: 'Install npm dependencies for Vue apps'

步骤3：确保MSBuild自动触发Vue构建 #

如果你的BuildVueClientApp目标未绑定到项目构建流程，需在项目文件中添加绑定，让VSBuild自动执行：

<Target Name="BeforeBuild">
  <CallTarget Targets="BuildVueClientApp" />
</Target>

完整调整后的Pipeline脚本 #

trigger:
- development

pool:
  vmImage: 'windows-latest'

variables:
  solution: '**/*.sln;-:**\Examples*.sln'
  buildPlatform: 'Any CPU'
  buildConfiguration: 'Release'
  nodeVersion: '14.x' # 匹配本地Node版本

steps:
- task: NuGetToolInstaller@1
  displayName: 'Install NuGet tool'

- task: NuGetCommand@2
  inputs:
    restoreSolution: '$(solution)'
  displayName: 'Restore NuGet packages'

- task: NodeTool@0
  inputs:
    versionSpec: '$(nodeVersion)'
  displayName: 'Install Node.js'

- task: CmdLine@2
  inputs:
    script: |
      for /d %%i in ("$(Build.SourcesDirectory)\**\Scripts\client-app") do (
        cd "%%i"
        npm install
      )
  displayName: 'Install npm dependencies for Vue apps'

- task: VSBuild@1
  inputs:
    solution: '$(solution)'
    msbuildArgs: '/p:DeployOnBuild=true /p:WebPublishMethod=Package /p:PackageAsSingleFile=true /p:SkipInvalidConfigurations=true /p:BuildInParallel=true /p:PackageLocation="$(build.artifactStagingDirectory)"'
    platform: '$(buildPlatform)'
    configuration: '$(buildConfiguration)'
  displayName: 'Build solution'

- task: VSTest@2
  inputs:
    platform: '$(buildPlatform)'
    configuration: '$(buildConfiguration)'
  displayName: 'Run tests'

常见问题排查 #

• npm命令找不到：添加npm --version任务验证Node.js是否安装成功。
• 依赖安装缓慢：添加缓存任务加速npm依赖安装：

  - task: Cache@2
    inputs:
      key: 'npm | "$(Agent.OS)" | **/package-lock.json'
      path: '**/node_modules'
    displayName: 'Cache npm dependencies'
  

• Vue构建路径错误：检查项目文件中$(FullModulePath)是否正确指向Vue项目根目录。

内容的提问来源于stack exchange，提问作者Will Strohl