Nuxt 生产环境中的 404 错误答案

【问题标题】：404 errors in Nuxt Production environmentNuxt 生产环境中的 404 错误
【发布时间】：2021-07-04 04:12:26
【问题描述】：

我的应用在开发模式下运行良好，但是在生产环境中我遇到了问题。

我的文件夹结构是这样的页面 > 小部件 > _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/'
        }
    }

【问题讨论】：

标签： vue.js webpack nuxt.js

【解决方案1】：

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

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

Nuxt Docs

【讨论】：

我将 buildDir 更改为 - buildDir: '_nuxt/dist/'。我仍然遇到同样的错误
它应该这样工作。我无法重现您的问题。也许这与您部署网站的方式有关。

【解决方案2】：

终于发现问题了，是nginx配置的问题。

反向代理http://localhost:8000/有一个尾部斜杠

我必须删除它来解决问题 - http://localhost:8000

【讨论】：