Nuxt3构建遇RollupError：意外字符'�'，求排查解决

错误信息 #

ERROR  RollupError: Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)                                                                                                                           nitro 5:31:59 PM

1: �PNG
   ^
2:
IHDR�����IDATx�W�cY�څ����i�k�޶L�
                                �c�5��dm��x�����f���U�^���=�<'���2��v��nX�0
                                                                           E�
...                                                                          ��h��v*


 ERROR  Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)                                                                                                                                              5:31:59 PM

  at error (node_modules/rollup/dist/es/shared/parseAst.js:337:30)
  at parseError (node_modules/rollup/dist/es/shared/parseAst.js:972:9)
  at convertNode (node_modules/rollup/dist/es/shared/parseAst.js:2057:12)
  at convertProgram (node_modules/rollup/dist/es/shared/parseAst.js:965:12)
  at parseAstAsync (node_modules/rollup/dist/es/shared/parseAst.js:2108:12)
  at async Module.tryParseAsync (node_modules/rollup/dist/es/shared/node-entry.js:13539:20)
  at async Module.setSource (node_modules/rollup/dist/es/shared/node-entry.js:13120:35)
  at async ModuleLoader.addModuleSource (node_modules/rollup/dist/es/shared/node-entry.js:17810:13)



 ERROR  Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)

排查背景 #

• 本地开发运行正常，仅构建部署时触发错误
• 已移除app.vue中通过<NuxtImg>引入的public/images/dark-bg.png，错误仍存在
• 排查发现node_modules/leaflet/dist/images/marker-shadow.png疑似引发问题

配置文件 #

nuxt.config.ts #

// https://nuxt.com/docs/api/configuration/nuxt-config
// @ts-ignore
import type { NuxtPage } from "@nuxt/schema";

// @ts-ignore
export default defineNuxtConfig({
  nitro: {
    prerender: {
      autoSubfolderIndex: false
    },
  },
  devtools: { enabled: false },
  hooks: {
    'pages:extend'(pages: NuxtPage[]) {
      pages.push({
        name: 'location',
        path: '/location/:citySlug',
        file: '~/pages/spots/[citySlug].vue'
      })
    }
  },
  runtimeConfig: {
    public: {
      baseURL: process.env.NUXT_API_BASE_URL || 'https://api.sunsetzinho.com/'
    }
  },
  modules: [
    'nuxt-primevue',
    'nuxt3-leaflet',
    'nuxt-icon',
    '@pinia/nuxt',
    '@vee-validate/nuxt',
    '@nuxt/image',
    '@nuxtjs/tailwindcss'
  ],
  primevue: {},
  veeValidate: {
    // disable or enable auto imports
    autoImports: true,
    // Use different names for components
    componentNames: {
      Form: 'VeeForm',
      Field: 'VeeField',
      FieldArray: 'VeeFieldArray',
      ErrorMessage: 'VeeErrorMessage'
    }
  },
  css: [
    'primevue/resources/themes/aura-dark-noir/theme.css',
    '~/assets/css/main.css',
    '~/assets/css/vendors/leaflet.css'
  ]
})

package.json #

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.11.3",
    "@types/lodash.debounce": "^4.0.9",
    "@types/platform": "^1.3.6",
    "autoprefixer": "^10.4.17",
    "nuxt": "^3.10.0",
    "nuxt-icon": "^0.6.8",
    "nuxt-primevue": "^0.2.2",
    "nuxt3-leaflet": "^1.0.12",
    "prettier": "^3.2.5",
    "vue": "^3.4.15",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@nuxt/image": "^1.3.0",
    "@pinia/nuxt": "^0.5.1",
    "@tiptap/pm": "^2.2.2",
    "@tiptap/starter-kit": "^2.2.2",
    "@tiptap/vue-3": "^2.2.2",
    "@vee-validate/nuxt": "^4.12.5",
    "date-fns": "^3.3.1",
    "lodash.debounce": "^4.0.8",
    "mitt": "^3.0.1",
    "pinia": "^2.1.7",
    "platform": "^1.3.6",
    "primevue": "^3.47.2",
    "yup": "^1.3.3"
  }
}

错误原因 #

核心问题是Rollup尝试将二进制PNG文件当作JavaScript模块解析：

• 你在nuxt.config.ts的css数组中手动引入了~/assets/css/vendors/leaflet.css，该CSS文件包含对Leaflet内置图片（如marker-shadow.png）的相对路径引用
• Nuxt3构建流程中，这些图片路径未被正确处理：既没有被插件转换为合法的资源引用，也没有被复制到构建输出目录
• 导致Rollup处理CSS时，试图读取并解析PNG的二进制内容，最终抛出"Unexpected character"错误

解决方案 #

方案1：移除手动引入的Leaflet CSS，使用模块自动加载 #

已安装的nuxt3-leaflet模块会自动处理Leaflet的样式和资源路径，只需从css数组中删除手动引入的Leaflet CSS：

css: [
  'primevue/resources/themes/aura-dark-noir/theme.css',
  '~/assets/css/main.css'
  // 移除该行：'~/assets/css/vendors/leaflet.css'
]

方案2：配置Vite正确识别图片资源 #

若必须手动引入CSS，可在nuxt.config.ts中添加Vite配置，让其正确识别图片资产：

export default defineNuxtConfig({
  // ...其他配置
  vite: {
    assetsInclude: ['**/*.png', '**/*.jpg', '**/*.gif'],
  },
})

方案3：手动复制Leaflet图片资源到输出目录 #

通过Nitro的publicAssets配置，将Leaflet的图片资源复制到构建输出的静态资源目录：

export default defineNuxtConfig({
  nitro: {
    prerender: {
      autoSubfolderIndex: false
    },
    publicAssets: [
      {
        src: 'node_modules/leaflet/dist/images',
        dest: 'images'
      }
    ]
  },
  // ...其他配置
})

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