Page 1 of 1

Assets issues when deploying Atlantis in subfolder

Posted: 22 May 2023, 20:13
by Kyvu
Hello,

Just bougth Atlantis template and tried it out the box on a production server.

It is ok if I put the build files into the root folder but on a subfolder, it can't load images located on "/layout/images" for instance.

I updated vite.config.js like so:

Code: Select all

export default defineConfig(() => {
    return {
        plugins: [vue()],
        base: "/my/subfolder/",
        resolve: {
            alias: {
                '@': fileURLToPath(new URL('./src', import.meta.url)),
            },
        },
    };
});
The router index.js has been changed as:

Code: Select all

const router = createRouter({
    history: createWebHashHistory("/my/subfolder/"),
    base: "/my/subfolder/",
    routes,
    scrollBehavior() {
        return { left: 0, top: 0 };
    },
});
In server side, I also set up an .htaccess to accept the routing on a subfolder.

Navigation is working well, but the system still tried to load assets from the root server folder instead of subfolder.

Any idea of what I am missing?

Thanks in advance.

Regards.

Re: Assets issues when deploying Atlantis in subfolder

Posted: 05 Jun 2023, 08:40
by tugce.kucukoglu
Sorry for the late answer.

At first look, everything seems fine. I'm not sure but .htaccess could have a a problem.

Re: Assets issues when deploying Atlantis in subfolder

Posted: 05 Aug 2023, 14:25
by Kyvu
Hello,

After modifying the path to the assets with the sub folder name, it works perfectly.

Regards.

Re: Assets issues when deploying Atlantis in subfolder

Posted: 09 Aug 2023, 10:54
by tugce.kucukoglu
Thanks for the update!

Re: Assets issues when deploying Atlantis in subfolder

Posted: 26 Aug 2023, 12:23
by nehakakar
Your template's HTML and Vue components, you are referring to assets using relative paths or using the process.env.BASE_URL variable.
Use this variable..

Code: Select all

<img :src="`${process.env.BASE_URL}layout/images/image.jpg`" alt="Image" />
If you're using the @ alias in your Vue components, then you're correctly resolving file URLs using the alias.
ex:

Code: Select all

import someImage from '@/layout/images/image.jpg';
or look into this if any one have similar issue on Atlantis.