Nuxt Production环境中的404个错误

Question

我的应用程序在开发模式下运行良好，但我在生产环境中面临问题。

我的文件夹结构与此页面类似>小工具&gt_id.vue

为了测试，我只在_id.vue文件中放了一个h1标记，当我运行时输入url-https://app.mydomain.com/widget/xyz我在所有文件上都有404个错误。

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 

这是我的应用程序nuxt.config.js文件代码，无法弄清楚这里的问题是什么：

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

请求这些脚本文件时，nuxt使用build.publicPath来查找它们。您的buildDir路径告诉nuxt将构建文件保存在_nuxt中，而build.publicPath路径则告诉nuxt这些文件位于_nuxt/dist中。这就是你得到404分的原因。

您可以更改build.publicPath以匹配buildDir来解决此问题。或者改为buildDir。

Nuxt文档

Answer 2

最后我发现了问题，这是由于nginx配置造成的。

反向代理http://localhost:8000/有一个尾随斜线

我不得不删除它来解决问题-http://localhost:8000