Customize file paths in NuxtJS builds without changing router options: a step-by-step guide

Question

I developed a SPA using NuxtJS (ssr: false). After building, the file paths for the javascript and css files are relative to the root folder of the domain rather than the dist folder. For example <script src="/_nuxt/e247009.js"></script> will cause the browser to throw an error

"The resource from 'url' is blocked due to a MIME type ("text/html") mismatch (X-Content-Type-Options: nosniff)."

My url The path within css fonts-face also has this problem.

I was able to use this solution https://stackoverflow.com/a/61638555/8488702 to resolve the error by setting router options as follows:

router: {
  base: './'
}

But now another problem arises, that is when I load index.html located in the root directory of the project nuxt router it shows an error

The page cannot be found

How to customize the file path without changing the router options to avoid damaging the router?

Answer 1

OP ran the project using his Webstorm IDE, thinking target: 'static' would allow it to work on the local environment. Even though it works in production because actual static files are generated (which can indeed be hosted on a CDN), modern development isn't that simple.

So we really need to use the webpack-dev-server built-in local server to support all the powerful features of modern development (HMR, file hashing, SASS, etc...).

Running yarn dev (or npm run dev) will allow for a working project with the Webpack v4 configuration already configured for you by the Nuxt core team.