Assets issues when deploying Atlantis in subfolder

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
Kyvu
Posts: 2
Joined: 11 Jun 2022, 11:46

22 May 2023, 20:13

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.

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

05 Jun 2023, 08:40

Sorry for the late answer.

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

Kyvu
Posts: 2
Joined: 11 Jun 2022, 11:46

05 Aug 2023, 14:25

Hello,

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

Regards.

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

09 Aug 2023, 10:54

Thanks for the update!

nehakakar
Posts: 5
Joined: 04 Jul 2023, 12:41
Location: India
Contact:

26 Aug 2023, 12:23

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.

Post Reply

Return to “Atlantis - PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests