search

emosheeep / vite-plugin-virtual-mpa

Out-of-box MPA plugin for Vite, generate multiple entries using only one template.
https://stackblitz.com/~/github.com/emosheeep/vite-plugin-virtual-mpa
MIT License
116 stars 15 forks source link

Is it possible to config different base url for different page? #75

Closed SGAKonata closed 2 months ago

SGAKonata commented 2 months ago

For each page in my project may be deployed with different endpoints, so my index should use different base url to get their static resource.

For example, I have two apps apple and banana , and two html after build:

<html lang="en">
    <title>apple</title>
     <script type="module" crossorigin src="/static/js/apple.js"></script>
</html>

<html lang="en">
    <title>banana</title>
     <script type="module" crossorigin src="/static/js/banana.js"></script>
</html>

They are deployed with address http://server/apple and http://server/banana seperately. To get access to their static files, they need to vist server/{name}/static, and this is usually config in vite.config.ts -> base but it's a global setting.

Is it possble to achieve my aim thought this plugin?

emosheeep commented 2 months ago

Try this renderBuiltUrl API → https://vitejs.dev/guide/build.html#advanced-base-options

SGAKonata commented 2 months ago

Thanks a lot. Althought it's still experimental, but it wroks! Here is my code

// vite.config.ts
// defineConfig
    experimental: {
        renderBuiltUrl(filename, { hostId, hostType, type }) {
            if (hostType === 'html') {
                const name = hostId.replace(/\.html$/, '')
                return base + name + '/' + filename
            } else {
                return base + filename
            }
        },
    },