How to deploy my vitepress to azure static web app with base url?

Question

Now I can deploy the website to http:xxxxxx/index.html, but what I want to do now is to deploy it to http:xxxxx/web/myapp/index.html, so I set the base options in the Vitepress to make it serve at /web/myapp, it works in my local environment ( npm run docs:serve will show localhost:5173/web/myapp/index.html, but when I deploy the app to azure static web app, the main file will be unable to find any css / js resource, and when you try to go to http:xxxxx/web/myapp/index.html, it will show 404 in return

Here's related setting

Azure

app_location: "docs/.vitepress/dist"
skip_app_build: true

Vitepress

base: '/web/myapp'

Now my guess is when you build the application, the location is still at /dist, in the static web app, it will try to find the resource at web/myapp/assets/index.css so it won't be able to find related file since the file exist in /assets/index.css.

How Azure static web app solve this kind of problems ?

Answer 1

I had same problem. Here is how I solved it:

// .vitepress/config.js

const { BASE: base = '/' } = process.env
export default { base, outDir: `../dist/docs${base}` }

// package.json

"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"docs:serve": "vitepress serve docs",
"build": "pnpm docs:build && BASE='/foo/' pnpm docs:build"

This issue from GitHub maybe helpful: How can I set the base url for 2 different domains