404 errors in Nuxt Production environment - vue.js

Question

My app works perfectly in dev mode, however I'm facing issues in the production environment.
My Folder Structure is like this pages > widget > _id.vue
For testing I just put a h1 tag in _id.vue file, when I run enter the url - https://app.mydomain.com/widget/xyz I get 404 errors on all files.
https://app.mydomain.com/widget/hhhhh 404
https://app.mydomain.com/_nuxt/dist/bf9e34c.js net::ERR_ABORTED 404
https://app.mydomain.com/_nuxt/dist/eb32a87.js net::ERR_ABORTED 404
https://app.mydomain.com/_nuxt/dist/cc2d21b.js net::ERR_ABORTED 404
Here is my apps nuxt.config.js file code, unable to figure out what's the issue here:
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
server: {
port: 8000 // default: 3000
},
target: 'server',
head: {
title: 'Title',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'my website description'
}
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ href: '../assets/styles/style.css' }, { href: '../assets/styles/videoform.css' }, { href: '../assets/styles/tailwind-responsive.css' }, { href: '../assets/styles/tailwind-components.css' }
],
script: [
{ src: 'https://js.stripe.com/v2/' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
// <style>
// #import '../../assets/styles/style.css';
// #import '../../assets/styles/videoform.css';
// #import '../../assets/styles/tailwind-responsive.css';
// #import '../../assets/styles/tailwind-components.css';
// </style>
css: [
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/tailwindcss
'#nuxtjs/tailwindcss',
'#nuxtjs/composition-api'
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
'#nuxtjs/axios',
],
axios: {
// proxy: true
},
// Build Configuration: https://go.nuxtjs.dev/config-build
buildDir: '_nuxt',
build: {
publicPath: '_nuxt/dist/'
}
}

Answer 1

When requesting those script files, nuxt uses the build.publicPath to find them. Your buildDir path tells nuxt to save the build files in _nuxt, while your build.publicPath tells nuxt that those files are located in _nuxt/dist. That's why you get a 404.
You can change the build.publicPath to match the buildDir to fix this. Or change the buildDir instead.
Nuxt Docs

Answer 2

Finally I figured out the problem, it was due to nginx configuration.
There was a trailing slash for the reverse proxy http://localhost:8000/
I had to remove that to fix the issue - http://localhost:8000