I created a Nuxt 3 Vue 3 project that integrates with WordPress. Everything works fine when I run the project locally using npm run dev. However, I’m facing an issue when deploying the project by running npm run generate, which places the generated files in the dist directory by default.

The problem arises when I upload the files and open the root index.html file in a browser. The site fails to load the CSS and JS files because it tries to load them from the root of the domain, instead of from the correct path.

I attempted to fix this by modifying the nuxt.config.js file like this:

router: {
  base: '/dist/'
}

But this didn’t resolve the issue.

Here is my current nuxt.config.js file:

export default defineNuxtConfig({
  app: {
    error404: '/error',
    baseURL: '/',
  },

  devtools: { enabled: true },

  modules: [
    '@nuxt/devtools',
    '@nuxtjs/tailwindcss',
  ],

  css: [
    '~/assets/sass/app.scss',
    '~/assets/css/enlighter.css'
  ],
  build: {
    postcss: {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    },
  },

  runtimeConfig: {
    public: {
      wordpressUrl: 'http://my-wordpress.local/graphql'
    }
  },

  ssr: true,

  routeRules: {
    "/**": { swr: true },
    "/dashboard/**": { ssr: false },
  },
})

and here is the structure of the project:

What could be causing this issue with the paths after deployment, and how can I properly configure Nuxt to load the CSS and JS files correctly? Any help would be greatly appreciated!