一个非常普通的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">
...
尝试了各种配置项,都无法解决这个问题。