导入JS变量显示undefined？Vue.js外部JS文件引入问题求助

嘿John，我来帮你排查这个问题！你遇到的情况主要有两个原因，咱们一步步解决：

1. 首先确保外部JS文件正确导出变量 #

你说在age.js里用console.log能正常输出，但组件导入后是undefined，这说明你的age.js没有把变量**暴露（导出）**给外部文件使用。

修正age.js的导出方式： #

如果是单个变量，推荐用默认导出：

// /assets/js/age.js
// 定义你的年龄值
const myAge = 28; // 替换成你的实际值
// 导出这个变量作为默认导出
export default myAge;

如果需要导出多个变量，可以用命名导出：

// /assets/js/age.js
export const myAge = 28;
export const userName = "John";

2. 将导入的变量挂载到Vue组件实例上 #

即使你成功导入了变量，模板里的{{ myAge }}也无法直接访问它——因为Vue模板只能读取组件实例上的属性（比如data、computed里的内容）。

对应修改你的Application.vue： #

场景一：使用默认导出的情况

<template>
  <div>我今年 {{ age }} 岁</div>
</template>

<script>
// 导入默认导出的变量
import myAge from '../assets/js/age.js'

export default {
  data() {
    return {
      // 将导入的变量赋值给组件实例的age属性
      age: myAge
    }
  },
  created() {
    console.log('I am ' + myAge); // 现在这里会正常输出了
  }
}
</script>

场景二：使用命名导出的情况

如果age.js用的是命名导出，导入时要加花括号：

<script>
// 导入命名导出的变量
import { myAge } from '../assets/js/age.js'

export default {
  data() {
    return {
      age: myAge
    }
  },
  created() {
    console.log('I am ' + myAge);
  }
}
</script>

为什么之前会失败？ #

• 第一点：age.js里的变量只是在自身文件作用域内有效，没有通过export导出，所以外部组件导入时拿到的是undefined。
• 第二点：Vue模板无法直接访问组件脚本里的局部变量，必须把变量挂载到组件实例上（比如放到data里），模板才能读取到。

按照上面的步骤修改后，你的console.log和模板里的内容应该都能正常显示啦！

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