Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Vite built to its relative dist folder

I have started using Vite and everything works fine on dev but when doing build
nothing displayed because it build to the root / which is a problem because I want to deploy it to a server as in https://example.com/iframes/app so I can then use an iframe to access this url.

So I have changed the vite.confi.js to

base: './', // This will ensure that paths are relative to the current directory
build: {
  outDir: 'dist',
  assetsDir: 'assets',
},

This works for everything except for all the assets that were on public, on dev it’s all fine but on build the browser looks for it at the root level of the server

`https://example.com/asset-on-public.svg`

instead of the desired

`https://example.com/iframes/app/asset-on-public.svg`

Any ideas?

Tags:

2

Answers


  1. 0

    As documented, the base URL should be './' if you want "embedded deployment", i.e. Vite to use relative URLs.

    If you want Vite to package, transform, etc. your assets, you need to import them (they’ll turn into URL strings by default), e.g.:

    import closeSvg from './close.svg';

function CloseButton() {
  return <img src={closeSvg} />;
}


function CloseBackgroundDiv() {
  return <div style={{backgroundImage: `url(${closeSvg})`}} />;
}
    Login or Signup to reply.
  2. 0

    change the base in vite config file and then try to run npm run build or yarn run build.

        export default defineConfig({
     plugins: [react()],
     base: "./",
    });

    Then, in terminal (if you are using npm )

    npm run build

    This problem is occurring because the base of dist folder was not specified properly so just try to change the base in vite config file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search