Vue CLI 3.0 - azure deploy - azure

Question

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?

Answer 1

I havent used azure yet, but try only with
npm run build
instead of
npm run vue-cli-service build

Answer 2

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.

Answer 3

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

Answer 4

Only way I have found to host Vue-CLI build files in Azure is this:
Create a StorageV2 in Azure. Make this a static website (under settings). Make index.html the index document name.
Run: npm run build
Install Azure Storage explorer
Open the new storage you created in step 1 in Azure Storage Explorer, go to Blob Containers, $web
Copy the build files from the ./dist folder to the $web folder.
Open a web browser, enter the endpoint URL.