Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using a different "base" in vite.config.js

See original GitHub issue

I would like to use prerender function with a different base set in vite.config.json. Prerendering works except the paths to the rendered css/js/asset files is nog pre-pended with the base.

Example result with a base set to /tests/vite/:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="icon" href="/tests/vite/assets/logo.bebe2e90.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <link rel="modulepreload" crossorigin href="/assets/pages/_default/_default.page.client.ts.e43e8364.js">
    <link rel="stylesheet" href="/assets/pages/_default/_default.page.client.ts.824b1405.css">
    <link rel="preload" href="/assets/logo.bebe2e90.svg">
  </head>
  <body>
    <div id="app">
      <div class="layout" data-v-0d0df46e>
        <div class="navigation" data-v-0d0df46e><a href="/" class="logo" data-v-0d0df46e><img src="/tests/vite/assets/logo.bebe2e90.svg" height="64" width="64" data-v-0d0df46e></a><a href="/" data-v-0d0df46e>Home</a><a href="/about" data-v-0d0df46e>About</a><a href="/star-wars" data-v-0d0df46e>Star Wars</a></div>
        <div class="content" data-v-0d0df46e>
          <!--[--><!--[-->
          <h1>Star Wars Movies</h1>
          <ol>
            <!--[-->
            <li><a href="/star-wars/1">A New Hope</a> (1977-05-25) </li>
            <li><a href="/star-wars/2">The Empire Strikes Back</a> (1980-05-17) </li>
            <li><a href="/star-wars/3">Return of the Jedi</a> (1983-05-25) </li>
            <li><a href="/star-wars/4">The Phantom Menace</a> (1999-05-19) </li>
            <li><a href="/star-wars/5">Attack of the Clones</a> (2002-05-16) </li>
            <li><a href="/star-wars/6">Revenge of the Sith</a> (2005-05-19) </li>
            <!--]-->
          </ol>
          <p> Source: <a href="https://swapi.dev/api/films/">swapi.dev/api/films/</a>. </p>
          <p> Data can be fetched by using <code>addContextProps</code> and <code>setPageProps</code>. </p>
          <!--]--><!--]-->
        </div>
      </div>
    </div>
    <script>window.__vite_plugin_ssr = {pageId: "\u002Fpages\u002Fstar-wars\u002Findex", pageProps: {movies:[{title:"A New Hope",release_date:"1977-05-25",id:"1"},{title:"The Empire Strikes Back",release_date:"1980-05-17",id:"2"},{title:"Return of the Jedi",release_date:"1983-05-25",id:"3"},{title:"The Phantom Menace",release_date:"1999-05-19",id:"4"},{title:"Attack of the Clones",release_date:"2002-05-16",id:"5"},{title:"Revenge of the Sith",release_date:"2005-05-19",id:"6"}],docTitle:"6 Star Wars Movies"}}</script><script type="module" src="/assets/pages/_default/_default.page.client.ts.e43e8364.js"></script>
  </body>
</html>

As you can see only the svg is using the correct path.

Thanks for the great plugin!

Issue Analytics

State:
Created 2 years ago
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

brilloutcommented, Mar 26, 2021

Let me know if you have other questions. I’m also more than happy to hear critical(!) feedback.

0reactions

brilloutcommented, Apr 3, 2021

Base URL is now fully supported for all kinds of use cases; https://github.com/brillout/vite-plugin-ssr#base-url. It is now also unit tested.

Top Results From Across the Web

Configuring Vite

Configuring Vite #. When running vite from the command line, Vite will automatically try to resolve a config file named vite.config.js inside project...

How to set vite.config.js base public path? - Stack Overflow

According to vitejs , you can set the base public path when served in development or production, in your config options. When running...

Base URL - vite-plugin-ssr

Deploy our static assets to a CDN using the baseAssets configuration. Change the Base URL of our server using the baseServer configuration. //...

[development] vite config base option when set /path-name/ is ...

[development] vite config base option when set /path-name/ is not work correctly for url //path/to/static/assert/file.js in html #2114.

Vite Configuration - AEM Vite

Below is an example vite.config.js which intentionally uses the vite-tsconfig-paths as Adobe have adopted TypeScript in their archetype.