Nuxt3项目bug整理（一）： Nuxt3项目执行 nuxt build 的构建命令后控制台date-fns报错

Nuxt3项目执行 nuxt build 的构建命令后控制台date-fns报错

date-fns 是一个日期工具库，出现报错的原因是因为页面上引入了一些日期组件，比如naive-ui的n-date-picker组件：

<span class="filterDate">
  <n-date-picker
    v-model:value="historyDay"
    type="date"
    clearable
    placeholder="历史"
    @update:formatted-value="onMyDateChange"
  />
</span>

我们只需要在Nuxt3项目的 nuxt.config.ts 的配置文件添加配置：

export default defineNuxtConfig({
    
    
  ......
  build: {
    
    
    transpile:
      process.env.NODE_ENV === 'production'
        ? [
          'naive-ui',
          'vueuc',
          '@css-render/vue3-ssr',
          '@juggle/resize-observer',
          "date-fns", // 加入后可解决报错
        ]
        : ['@juggle/resize-observer']
  },
  vite: {
    
    
    envDir: '~/env', // 指定env文件夹
    optimizeDeps: {
    
    
      include:
        process.env.NODE_ENV === 'development'
          ? ['naive-ui', 'vueuc', 'date-fns-tz/esm/formatInTimeZone']
          : []
    },
  }
})

process.env.NODE_ENV === ‘production’ 需要判断是否为生产环境，因为这个报错只有在执行 nuxt build 的构建命令才会报错。