基本 vue.js 上的 dist 文件夹

Question

我用 Visual studio 2019 创建了一个基本的 vue.js。我把它放在我私人 azure 服务器的 git 上。我有一个 windows 构建代理。

构建yml，没有错误。

trigger:
- master

pool: 'Default'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

我尝试了一些“copy/archive 文件”命令。其中之一

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/VuejsApp1'
  inputs:
    TargetFolder: '$(Build.ArtifactStagingDirectory)/VuejsApp1'

每种方法似乎都表明从未创建 dist 文件夹。

类似问题：why is azure build pipeline not generating a dist folder for an angular build

##[section]Starting: npm install and build ============================================================================== Task : Command line Description : Run a command line script using Bash on Linux and macOS and cmd.exe on Windows Version : 2.151.1 Author : Microsoft Corporation Help : https://docs.microsoft.com/azure/devops/pipelines/tasks/utility/command-line ============================================================================== Generating script. ========================== Starting Command Output =========================== ##[command]"C:\windows\system32\cmd.exe" /D /E:ON /V:OFF /S /C "CALL "C:\DevOpsAgent_work_tempd81f910-5c00-4330-9d13-27c8c30aa7a0.cmd""

yorkie@2.0.0 install C:\DevOpsAgent_work1\s\node_modules\yorkie node bin/install.js

CI 检测到，跳过 Git 挂钩安装

core-js@2.6.11 postinstall C:\DevOpsAgent_work1\s\node_modules\core-js node -e "try{require('./postinstall')}catch(e){}"

感谢您使用 core-js (‌ https://github.com/zloirock/core-js ‌) 对于 polyfilling JavaScript 标准库！‌

该项目需要您的帮助！请考虑支持 core-js 打开集体或 Patreon：‌ >‌ https://opencollective.com/core-js ‌ >‌ https://www.patreon.com/zloirock ‌

此外，core-js 的作者（‌‌ https://github.com/zloirock ‌）正在寻找一个好的工作 -)‌

ejs@2.7.4 postinstall C:\DevOpsAgent_work1\s\node_modules\ejs node ./postinstall.js

感谢您安装 ‌EJS‌：使用 ‌Jake‌ JavaScript 构建工具 (‌https://jakejs.com/‌)‌

npm 警告可选跳过可选依赖项：fsevents@1.2.13 (node_modules\webpack-dev-server\node_modules\fsevents): npm 警告 notsup 跳过可选依赖项：不支持的平台 fsevents@1.2.13：想要 {"os":"darwin","arch":"any"}（当前： {"os":"win32","arch":"x64"}) npm WARN 可选跳过可选依赖：fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents): npm 警告 notsup 跳过可选依赖项：不支持的平台 fsevents@1.2.13：想要 {"os":"darwin","arch":"any"}（当前： {"os":"win32","arch":"x64"}) npm WARN 可选跳过可选依赖关系：fsevents@2.1.3（node_modules\fsevents）：npm WARN notsup 跳过可选依赖项：fsevents@2.1.3 不受支持的平台：想要 {"os":"darwin","arch":"any"}（当前： {"os":"win32","arch":"x64"})

添加了来自 822 个贡献者的 1488 个包，并审核了 1492 个包 71.233s

44 个包正在寻找资金运行 npm fund 了解详情

发现 6 个漏洞（1 个低，3 个中，2 个高）运行 npm audit fix 修复它们，或 npm audit 了解详细信息 ##[部分]完成：npm 安装和构建

Answer 1

有两个故障排除建议：

1.Try 在本地构建，或者运行 npm 命令使用 Azure DevOps 的 PowerShell 任务 查看是否存在同样的问题。

- task: PowerShell@2
  inputs:
    targetType: 'inline'
    script: |
      npm install
      npm run build

2.Check 如果 json 文件中的 options 参数设置为 dist。

  "options": {
        "outputPath": "dist",
       }

Answer 2

首先，您不需要在同一个“脚本”上进行安装和构建。

- script: 'npm install'
  displayName: 'Install dependencies'

- script: 'npm run build'
  displayName: 'Build project'

之后就可以得到dist文件夹

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/dist'
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

基本 vue.js 上的 dist 文件夹

dist folder on basic vue.js

vue.js

azure-devops

azure-pipelines

azure-yaml-pipelines