Vue中使用exports/import引入js文件报错：import未定义

嘿，我来帮你搞定这个「import未定义」的问题！你遇到的核心矛盾其实很清晰：icon.js用的是传统的变量定义方式，没有遵循ES模块的导出规范，而你在Vue组件里用的import是标准ES模块语法，两者不兼容才导致报错。下面分两种常见场景给你具体的解决办法：

场景1：你的项目用了打包工具（比如Vue CLI、Vite），这是最普遍的情况 #

第一步：修改icon.js的导出语法 #

把原来的var定义改成ES模块的导出格式，有两种可选方式：

方式1：命名导出

export const featherIcons = () => {
  return { 
    "activity": "<polyline points='22 12 18 12 15 21 9 3 6 12 2 12'></polyline>", 
    "airplay": "<path d='M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1'>..." 
    // 其他图标内容补全
  };
};

方式2：默认导出

const featherIcons = () => {
  return { 
    "activity": "<polyline points='22 12 18 12 15 21 9 3 6 12 2 12'></polyline>", 
    "airplay": "<path d='M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1'>..." 
    // 其他图标内容补全
  };
};

export default featherIcons;

第二步：在Vue组件中正确导入 #

根据你选择的导出方式，对应调整导入语法：

对应命名导出的导入

<template>
  <!-- 示例：渲染activity图标 -->
  <div v-html="getIcon('activity')"></div>
</template>

<script>
// 注意路径要根据你的文件实际位置调整，比如如果icon.js在src/assets下，路径就是'@/assets/icon.js'
import { featherIcons } from './icon.js';

export default {
  methods: {
    getIcon(iconName) {
      // 调用函数获取图标对象，再取出对应图标代码
      return featherIcons()[iconName];
    }
  }
}
</script>

对应默认导出的导入

只需要把导入语句改成：

import featherIcons from './icon.js';

后续的使用逻辑和上面完全一致。

场景2：项目没有用打包工具，直接在浏览器中运行 #

这种情况下浏览器默认不支持ES模块的import/export，可以选下面两种方案：

方案A：启用ES模块支持 #

1. 先按照场景1的方式修改icon.js的导出语法；
2. 在HTML中引入相关脚本时，给script标签加上type="module"属性：

<!-- 引入icon.js -->
<script type="module" src="./icon.js"></script>
<!-- 引入你的Vue组件脚本 -->
<script type="module" src="./your-component.js"></script>

或者在Vue单文件组件的script标签里直接设置：

<script type="module">
import { featherIcons } from './icon.js';

export default {
  // 组件逻辑
}
</script>

方案B：全局挂载（更简单的兼容方式） #

不需要用import/export，直接把图标函数挂载到全局window对象上：
修改icon.js：

window.featherIcons = () => {
  return { 
    "activity": "<polyline points='22 12 18 12 15 21 9 3 6 12 2 12'></polyline>", 
    "airplay": "<path d='M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1'>..." 
    // 其他图标内容补全
  };
};

然后在Vue组件里直接调用全局函数即可，不用写import：

methods: {
  getIcon(iconName) {
    return window.featherIcons()[iconName];
    // 或者直接写featherIcons()[iconName]也能生效
  }
}

补充一句：之前你把代码放在data()里能正常运行，是因为那部分代码属于Vue实例的作用域，不需要依赖模块导入机制，自然不会有语法兼容问题~

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