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?
2
Answers
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.:
change the base in vite config file and then try to run npm run build or yarn run build.
Then, in terminal (if you are using npm )
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.