Question

我想在使用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"
  }

我在devDependencies中添加了"@vue/cli": "^3.0.0-rc.3"，但是看不到任何变化。

Azure部署结果：

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

您有什么想法吗？

Answer 1

我还没有使用过天蓝色，但只能尝试

npm run build

代替

npm run vue-cli-service build

Answer 2

我已经成功在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"
  },
...

Answer 3

我认为您的构建管道与您所给出的信息不符。

我认为您缺少的只是一个简单的

this.events.publish('user:created', user, Date.now());

安装后，您就可以运行

<button (click)='xpandStatus=xpandStatus?false:true'>Toggle it</button>
<p>
<mat-expansion-panel [(expanded)]="xpandStatus">
  <mat-expansion-panel-header>
    <mat-panel-title>This an expansion panel</mat-panel-title>
    <mat-panel-description>xpandStatus is {{xpandStatus}}</mat-panel-description>
  </mat-expansion-panel-header>
  Two-way binding on the expanded attribute gives us a way to store and manipulate the expansion status.
</mat-expansion-panel>
</p>

在没有npm install的情况下，npm无法找到npm run build来构建应用程序。我通过这种方式构建自己的vue-cli 3.0应用程序，以从Azure DevOps构建管道中进行部署，以使天蓝色像这样。

或另一种可能性是您缺少另一个依赖项。将npm install添加到您的devDependencies中。正如丹尼尔·冈萨雷斯（Daniel Gonzalez）在评论中指出的那样，无需使用vue-cli-service脚本。

Answer 4

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

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

Vue CLI 3.0-Azure部署

4 个答案: