CODEWITHSUNDEEP
azurevue.js
Dominik
Dominik

Reputation: 1345

Vue CLI 3.0 - azure deploy

I want to deploy my app build in vue which use CLI 3.0.

My 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"
  }

I added "@vue/cli": "^3.0.0-rc.3" to devDependencies, but is don't see any changes.

Azure deploy result: 

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

Do you have any ideas?

Upvotes: 10

Views: 3400

Answers (4)

David Baker
David Baker

Reputation: 71

Only way I have found to host Vue-CLI build files in Azure is this:

  1. Create a StorageV2 in Azure. Make this a static website (under settings). Make index.html the index document name.
  2. Run: npm run build
  3. Install Azure Storage explorer
  4. Open the new storage you created in step 1 in Azure Storage Explorer, go to Blob Containers, $web
  5. Copy the build files from the ./dist folder to the $web folder.
  6. Open a web browser, enter the endpoint URL.

Upvotes: 0

user9483635
user9483635

Reputation:

I have succeed building Vue with Vue CLI 3 in Azure.

Sharing my build file here

Azure pipeline YAML script 


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"
  },
...

Upvotes: 1

VSDekar
VSDekar

Reputation: 1821

I assume you have a build pipeline that struggles with the message you have given.

I think what you are missing is a simple

npm install

After the install you are able to run

npm run build

Without the npm install before, threre is no vue-cli-service npm can find to build the application. I build my own vue-cli 3.0 app this way an deploy to azure like this from an Azure DevOps build pipeline.

or an other possibility is that you are missing another dependency. Add "@vue/cli-service": "^3.0.1" to your devDependencies. And as Daniel Gonzalez pointed out in the comments, there is no need for a postinstall script.

Upvotes: 1

Gerson E. Aguirre
Gerson E. Aguirre

Reputation: 875

I havent used azure yet, but try only with 

npm run build

instead of

npm run vue-cli-service build

Upvotes: 4

Related Questions