如何在Nuxt-Gmaps中正确配置本地clusterStyle图标？

直接使用~/assets路径无法被Google Maps API正确识别，因为该别名是Webpack的内部别名，浏览器无法解析，且assets目录下的资源在构建时会被哈希处理，路径会发生变化。以下是正确的配置方式：

方法1：使用require导入资源路径（适用于Nuxt 2/3） #

在组件的data中通过require获取编译后的正确图标路径：

export default {
  data() {
    return {
      clusterStyle: [
        {
          url: require('~/assets/img/map_cluster.svg'),
          width: 48,
          height: 48,
          textColor: "#000"
        }
      ]
    }
  }
}

方法2：使用ES模块导入（适用于Nuxt 3） #

通过ES模块导入方式获取资源路径：

import clusterIcon from '~/assets/img/map_cluster.svg'

export default {
  data() {
    return {
      clusterStyle: [
        {
          url: clusterIcon,
          width: 48,
          height: 48,
          textColor: "#000"
        }
      ]
    }
  }
}

为什么static目录不是最佳实践？ #

• static目录下的文件不会经过Webpack处理，不会添加哈希后缀，不利于浏览器缓存更新
• 若项目部署在子路径下，static资源的路径可能出现适配问题
• assets目录的资源会被Webpack优化处理，支持自动路径适配和缓存控制

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