Nuxt3项目使用vue-leaflet执行build时出现PNG字符异常报错

问题根源 #

打包时出现的Unexpected character '�'错误，是因为Leaflet依赖的PNG图标资源（比如默认标记图标）被Rollup/Vite错误当作JavaScript模块解析，而Nuxt3默认配置没有正确处理这类静态资源的加载规则，加上@vue-leaflet/vue-leaflet的导入逻辑在SSR环境下触发了资源路径异常。

解决方案 #

方案1：配置Vite正确识别静态资源并处理SSR打包

在项目根目录的nuxt.config.ts中添加Vite配置，明确指定需要处理的资源类型，并确保Leaflet相关包不被外部化：

export default defineNuxtConfig({
  vite: {
    // 让Vite识别Leaflet用到的静态资源格式
    assetsInclude: ['**/*.png', '**/*.svg', '**/*.woff2'],
    ssr: {
      // 强制Leaflet和vue-leaflet在SSR打包时被正确处理
      noExternal: ['leaflet', '@vue-leaflet/vue-leaflet']
    }
  }
})

方案2：改用客户端插件注册Vue-Leaflet组件

地图组件仅在浏览器端可用，通过Nuxt客户端插件注册可以避免SSR过程中的资源解析问题：

1. 在plugins目录下创建vue-leaflet.client.ts：

import { defineNuxtPlugin } from '#app'
import 'leaflet/dist/leaflet.css'
import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('LMap', LMap)
  nuxtApp.vueApp.component('LTileLayer', LTileLayer)
})

2. 在nuxt.config.ts中注册该插件：

export default defineNuxtConfig({
  plugins: [
    { src: '~/plugins/vue-leaflet.client.ts', mode: 'client' }
  ]
})

3. 组件中无需再手动import，直接使用<l-map>和<l-tile-layer>标签即可。

方案3：手动修复Leaflet图标路径（可选）

如果打包后地图标记图标显示异常，可在组件中手动指定图标路径：

<template>
  <!-- ... 原有地图代码 ... -->
</template>
<script lang="ts" setup>
import L from 'leaflet'
import { onMounted } from 'vue'

onMounted(() => {
  // 重置Leaflet默认图标路径
  delete L.Icon.Default.prototype._getIconUrl
  L.Icon.Default.mergeOptions({
    iconRetinaUrl: '/node_modules/leaflet/dist/images/marker-icon-2x.png',
    iconUrl: '/node_modules/leaflet/dist/images/marker-icon.png',
    shadowUrl: '/node_modules/leaflet/dist/images/marker-shadow.png',
  })
})
</script>

额外建议 #

• 升级Nuxt3到最新稳定版（你的项目用的3.0.0是初始版本，存在不少兼容性问题）
• 同步升级@vue-leaflet/vue-leaflet到最新版，官方后续版本优化了Nuxt3适配

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