nuxt3构建静态页面之后,页面文件_payload.js路径错误,怎么解决?

一个非常普通的nuxt3测试项目,
编译后发现除了dist/index.html中的文件引用正常外,其他子页面的_payload.js路径都是错误的:

// 正确路径
<link rel="modulepreload" href="/_payload.js">
// 错误路径
<link rel="modulepreload" href="/posts/test.html/_payload.js">

下面是我的配置信息
nuxt.config.js

export default {
    hooks: {
        'pages:extend'(routes: any) {
            routes.forEach((item: any) => {
                console.log(item.path)
                if (item.path != '/') {
                    item.path = item.path + '.html'
                }
            })
        },
    },
    // runtimeConfig: {
    //     public: {
    //         baseURL: '' // Exposed to the frontend as well.
    //     }
    // },
    app: {
        head: {
            meta: [
                {
                    name: 'viewport',
                    content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0',
                },
            ],
        },
        // baseURL: '',
    },
    plugins: [
        '/plugins/naive-ui.js',
    ],
    // router: {
    //     base: "/dist" //此为根目录,如果有具体目录需求按实际情况写
    // },
    // Target (https://go.nuxtjs.dev/config-target)
    // target: 'static',
    // rootDir: '',
    build: {
        transpile:
            process.env.NODE_ENV === 'production'
                ? [
                    'naive-ui',
                    'vueuc',
                    '@css-render/vue3-ssr',
                    '@juggle/resize-observer'
                ]
                : ['@juggle/resize-observer'],
    },
    generate: {
        routes: ['/posts/test.html']
    },
    vite: {
        optimizeDeps: {
            include:
                process.env.NODE_ENV === 'development'
                    ? ['naive-ui', 'vueuc', 'date-fns-tz/esm/formatInTimeZone']
                    : []
        },
    },
    alias: {
        '@/': '/*',
        'components': '/components',
        'utils': '/utils',
        'pages': '/pages',
        'const': '/const',
    },
    css: [
        '@/assets/global.css',
    ]
}

tsconfig.json

{
    "paths": {
        "@/": [
            "./"
        ]
    },
    "extends": "./.nuxt/tsconfig.json"
}

生成后的文件:

/dist

_nuxt/
images/
posts/
    test.html
index.html
_payload.js

index.html中代码:

...
<link rel="modulepreload" href="/_payload.js">
...

/posts/test.html中代码:

...
<link rel="modulepreload" href="/posts/test.html/_payload.js">
...

尝试了各种配置项,都无法解决这个问题。

阅读 2.5k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题