Nuxt使用vueflags插件加载国旗SVG出现404 Not Found错误如何解决

• Nuxt 中 assets 目录属于 webpack 编译托管的资源目录，直接通过原始 URL 路径访问无法命中。webpack 会给 assets 下的资源添加哈希后缀、或者编译后放到其他打包路径，你直接请求 /assets/flags/fr.svg 自然返回404。
• ~ 是 webpack 内置的路径别名，仅在 js/css 的 import/require、Vue 模板的资源绑定场景下会被解析，插件是直接把路径拼接为字符串当做请求 URL 使用，不会被 webpack 识别处理，所以把 ~ 拼到路径里也会404。

方案一：迁移国旗资源到 static 目录（操作最简单，适配性最好） #

1. 把原来 assets/flags 整个目录移动到项目根目录的 static 文件夹下（没有该文件夹就新建一个）
2. 修改 plugins/vueflags.js 的插件配置：

// plugins/vueflags.js
import Vue from "vue";
import VueFlags from "@growthbunker/vueflags";

Vue.use(VueFlags, {
    // 路径开头加/表示根路径，避免不同路由下路径拼接错误
    iconPath: '/flags/',
  });

static 目录下的资源会直接映射到站点根路径提供访问，/flags/fr.svg 可以直接被正常请求，完全适配插件的路径拼接逻辑。

方案二：保留资源在 assets 目录，自定义封装组件 #

如果你不想调整资源存放位置，可以不依赖插件内置的资源加载逻辑，自己封装国旗组件手动引入资源：

<!-- components/CustomFlag.vue -->
<template>
  <img :src="require(`~/assets/flags/${code}.svg`)" :class="`flag-${size}`" />
</template>
<script>
export default {
  props: {
    code: {
      type: String,
      required: true
    },
    size: {
      type: String,
      default: 'small'
    }
  }
}
</script>

使用时直接调用自定义组件即可：<CustomFlag code="fr" size="small" />

内容的提问来源于stack exchange，提问作者Agustin G.