deploy Vue.js to Azure Static Web.

Create empty azure storage account.

Enable Static Web Site

Get Endpoint URL

Build Vue project
1 | npm run build |
After build, create \dist
folder.
And we move this folder to $web container in storage account.
We can use Storage Explorer.
Storage Explorer Download
After install Explorer, connect your storage before you created.
Then move Blob container > $web

And drag and drop all files in build path dist\
to right panel.

Then open the browser, then move the endpoint at storage static web.
But when we click the button Search User, we return error message about CORS.

So, we added web endpoint in Azure Function.

Finall, we connect successfully.

Thanks
Related Posts
Azure app architecure - SummaryAzure app architecure - step01
Azure app architecure - step02
Azure app architecure - step03
Azure app architecure - step04