Nuxt3自定义Date原型函数构建后刷新报错问题求助

我封装了一个名为date的本地子模块，用于扩展Date.prototype.add、Date.prototype.format等Date原型方法，编译后的文件路径为modules/date/dist/index.js。已在主项目package.json中添加本地依赖：

"dependencies": {
    "date": "file:modules/date"
}

在布局文件中通过import "date"导入该模块，开发环境运行完全正常，但构建生产包后，刷新使用这些Date扩展方法的页面时，会提示函数不存在。该问题仅在刷新页面时出现，疑似模块加载延迟或未正确加载。

已尝试的解决方案 #

• 将模块文件移动到composables、utils、helpers等Nuxt3约定目录
• 修改模块导出方式为export default Date
• 直接在视图组件内写入扩展函数（可正常运行但会产生重复代码）
  以上方案均未解决问题。

项目环境与配置 #

项目架构（Laravel + Nuxt3） #

| - app 
| - boostrap 
| - client ( nuxt app ) 
| - config 
| - database 
| - lang 
| - modules
| | - date 
|   | - src
|   | - dist
| - node_modules 
| - public 
| - routes 
| - server 
| - storage

主项目package.json #

{
  "name": "station-donnees",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "npx prettier --write client/",
  },
  "devDependencies": {
    "@types/node": "^18.16.19",
    "flowbite": "^1.7.0",
    "lint-staged": "^14.0.0",
    "nuxt": "^3.7.3",
    "postcss": "^8.4.23",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.4.1",
    "sass": "^1.63.6",
    "tailwindcss": "^3.3.3"
  },
  "dependencies": {
    "date": "file:modules/date"
  },
  "lint-staged": {
    "client/**/*.{vue,js,css,scss,ts}": "prettier --write"
  }
}

nuxt.config.ts #

export default defineNuxtConfig({
  srcDir: "client/",
  typescript: {
    strict: true,
  },
  app: {
    head: {
      title: process.env.npm_package_name || "",
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        {
          hid: "description",
          name: "description",
          content: process.env.npm_package_description || "",
        },
      ],
      htmlAttrs: {
        lang: "fr",
      },
      link: [
        { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      ],
    },
  },
  css: ["~/assets/css/main.scss"],
  postcss: {
    plugins: {
      tailwindcss: {},
    },
  },
  runtimeConfig: {
    public: {
      webURL: process.env.WEB_URL || "http://localhost:3000",
      apiURL: process.env.API_URL || "http://localhost:8000",
    },
  },
});

date子模块package.json #

{
  "name": "date",
  "type": "module",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "test": "jest",
    "build": "babel --extensions .ts --ignore src/*.test.ts ./src -d ./dist",
  },
  "devDependencies": {
    "@babel/cli": "^7.21.5",
    "@babel/core": "^7.22.1",
    "@babel/preset-env": "^7.22.4",
    "@babel/preset-typescript": "^7.22.5",
    "@types/jest": "^29.5.2",
    "babel-jest": "^29.5.0",
    "jest": "^29.5.0",
  }
}

测试页面代码（bar.vue） #

<template>
  <div>
    <h1>bar page</h1>
    <input type="text" v-model="date" />
  </div>
</template>

<script lang="ts" setup>
const date = ref("");
date.value = new Date().format("YYYY");
</script>

内容的提问来源于stack exchange，提问作者Mehdi