[Vuejs]-Unable to load Vuejs application on Azure after deployment

by

0👍

✅

Ok, so after a few hours away and realizing I was over thinking this, the answer to this question is both options presented above

Step 1

  1. Remove the directory structure in the artifact so that the index.html file is at the artifact root.

There is an additional option you can add to the CopyFiles step in the build pipeline to denote the source folder. Doing so will copy the files in the structure from that point on, while preserving any subfolder structure if you’re using the double wildcard character ‘**’. 

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

Will result in a directory structure in the artifact of

dist
-- index.html

Step 2

  1. Update the IIS config to inform it of the proper location of the index.html file.

I also needed to setup a web.config file with the rewrite rule to use the index.html file (as Azure was trying to create a node.js web.config file by default when no web.config file was present). This config file needed to be in the root directory of the artifact as well, so I added a second CopyFile task to do that before the main CopyFile task to the build staging directory.

  displayName: 'Copy web.config to: MyProject/dist'
  inputs:
    SourceFolder: 'MyProject'
    Contents: |
      **/web.config
    TargetFolder: 'MyProject/dist'

Leave a comment