Vue CLI 3.0 - 天蓝色部署答案

【问题标题】：Vue CLI 3.0 - azure deployVue CLI 3.0 - 天蓝色部署
【发布时间】：2020-06-16 14:40:01
【问题描述】：

我想在使用 CLI 3.0 的 vue 中部署我的应用构建。

我的 package.json：

  "scripts": {
    "serve": "vue-cli-service serve",
    "postinstall": "npm run build",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  }

我将 "@vue/cli": "^3.0.0-rc.3" 添加到 devDependencies，但没有看到任何变化。

Azure 部署结果：

> npm run vue-cli-service build
npm ERR! missing script: vue-cli-service

你有什么想法吗？

【问题讨论】：

我也是，有什么解决办法吗？努力让 VUE CLI 在 Azure 上运行
您不需要postinstall 脚本，npm run build 已经与build 脚本一起运行。另外，您用于部署文件的根目录是什么？它应该是 dist 文件夹，webpack 在 npm run build 完成后使用所有可部署文件创建。

标签： azure vue.js

【解决方案1】：

我还没有使用过 azure，但只尝试使用

npm run build

而不是

npm run vue-cli-service build

【讨论】：

【解决方案2】：

我假设您的构建管道无法处理您提供的信息。

我认为你缺少的是一个简单的

npm install

安装后就可以运行了

npm run build

如果没有npm install 之前，就没有vue-cli-service npm 可以找到构建应用程序。我以这种方式构建自己的 vue-cli 3.0 应用程序，然后从 Azure DevOps 构建管道部署到像这样的天蓝色。

或者另一种可能性是您缺少另一个依赖项。将 "@vue/cli-service": "^3.0.1" 添加到您的 devDependencies。正如 Daniel Gonzalez 在 cmets 中指出的那样，不需要 postinstall 脚本。

【讨论】：

【解决方案3】：

我已经在 Azure 中使用 Vue CLI 3 成功构建了 Vue。

在这里分享我的构建文件

Azure 管道 YAML 脚本


resources:
- repo: self

trigger: ['staging']

pool:
  vmImage: 'Ubuntu 16.04'

steps:
- task: NodeTool@0
  displayName: 'Use Node 10.x'
  inputs:
    versionSpec: 10.x

- script: |
    npm install
    npm run build-staging
  displayName: 'npm install and build'
  env:
    NODE_ENV: staging

- task: ArchiveFiles@2
  displayName: Archive
  inputs:
    rootFolderOrFile: '$(build.sourcesDirectory)/dist'
    includeRootFolder: false
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.SourceVersion)_$(Build.BuildId).zip'


- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: build'
  inputs:
    ArtifactName: build

package.json

...
 "scripts": {
    "serve": "vue-cli-service serve --port 9001",
    "build": "vue-cli-service build",
    "build-staging": "NODE_ENV=production vue-cli-service build --mode staging",
    "build-production": "NODE_ENV=production vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },
...

【讨论】：

这个不行，我试过同样的 package.json 和 YAML

【解决方案4】：

我发现在 Azure 中托管 Vue-CLI 构建文件的唯一方法是：

在 Azure 中创建 StorageV2。将其设为静态网站（在设置下）。将 index.html 设为索引文档名称。
运行：npm run build
安装 Azure 存储资源管理器
在 Azure 存储资源管理器中打开您在步骤 1 中创建的新存储，转到 Blob 容器，$web
将构建文件从 ./dist 文件夹复制到 $web 文件夹。
打开网络浏览器，输入端点 URL。

【讨论】：