Vue.js中Chance JS库导入异常：歌曲视图可用，流派视图报错

现象 #

我有两个Vue视图（歌曲/流派），想用Chance.js生成随机数据填充输入框，但出现奇怪的问题：

• 仅在流派视图中用import {chance} from "chance"导入时，歌曲视图能正常用Chance生成数据，但流派视图报错：TypeError: undefined is not an object (evaluating 'chance__WEBPACK_IMPORTED_MODULE_1__.chance.radio')
• 删除流派视图的导入语句后，两个视图都无法使用Chance。

流派视图代码：

<template>
  <div>
    <input type="text" id="genre-name" placeholder="Name" v-model="name" /><br />
    <input type="text" id="genre-country" placeholder="Country" v-model="country" /><br />
    <input type="text" id="genre-year" placeholder="Year" v-model="year" /><br />
    <button @click="addGenre" id="genre-button">Add Genre</button>
  </div>
</template>

<script>
import { requestOptions, base_url } from '@/utils/requestOptions';
//var chance = require('chance').Chance(); this works for both, when importing only in one file
import {chance} from "chance"; //<= 问题所在的导入语句
export default {
  data() {
    return {
      name: chance.radio(),
      country: chance.country({ full: true }),
      year: chance.year()
    }
  },
  methods: {
    addGenre() {
      //...
    }
  }
}
</script>

歌曲视图代码：

<template>
  <div>
    <input type="text" id="name" placeholder="Name" v-model="name" /><br />
    <input type="text" id="author" placeholder="Author" v-model="author" /><br />
    <input type="text" id="country" placeholder="Country" v-model="country" /><br />
    <input type="text" id="duration" placeholder="Duration" v-model="duration" /><br />
    <input type="text" id="views" placeholder="Views" v-model="views" /><br />
    <input type="text" id="genre" placeholder="Genre" v-model="genre" /><br />
    <button @click="addSong">Add Song</button>
  </div>
</template>

<script>
import { requestOptions, base_url } from '@/utils/requestOptions';
//this is working without importing chance
export default {
  data() {
    return {
      name: chance.word(),
      author: chance.last(),
      country: chance.country({ full: true }),
      duration: chance.minute(),
      views: chance.integer({ min: 0, max: 100000000 }),
      genre: chance.radio()
    }
  },
  methods: {
    addSong() {
      //...
    }
  }
}
</script>

原因分析 #

1. 错误的ES模块导入方式：Chance.js的ES模块采用默认导出（导出的是Chance构造函数），而非命名导出。你用import {chance} from "chance"尝试导入命名导出的chance，但这个变量根本不存在，所以流派视图中的chance是undefined，调用chance.radio()自然会抛出类型错误。

2. 歌曲视图能工作的原因：当你在流派视图中导入Chance模块时，模块代码会执行，旧版本的Chance.js可能会自动将chance实例挂载到全局对象（比如浏览器的window）上。歌曲视图没有导入，但能访问到这个全局的chance变量，所以可以正常工作。一旦删除流派视图的导入，Chance模块不会被加载，全局也就没有chance变量，两个视图都失效。

你注释里提到的var chance = require('chance').Chance()能正常工作，是因为CommonJS规范下，require('chance')返回的是包含Chance构造函数的对象，调用Chance()会生成一个有效实例，同时Webpack的模块缓存机制会让其他模块间接受益，不会出现undefined的问题。

解决方案 #

不管是ES模块还是CommonJS，都用正确的方式导入并生成Chance实例：

方式1：ES模块导入（推荐） #

在每个需要使用的视图中，正确导入并实例化：

import Chance from 'chance';
const chance = new Chance();

修改后的流派视图script部分：

import { requestOptions, base_url } from '@/utils/requestOptions';
import Chance from "chance";
const chance = new Chance();
export default {
  data() {
    return {
      name: chance.radio(),
      country: chance.country({ full: true }),
      year: chance.year()
    }
  },
  // ...其他代码
}

歌曲视图同样添加这段导入代码，避免依赖全局变量。

方式2：CommonJS导入（兼容旧代码） #

保持你注释里的写法，在需要的模块中导入：

var chance = require('chance').Chance();

这种方式也能正确获取Chance实例，不会出现undefined的问题。

总结 #

核心问题是错误的ES模块导入方式导致流派视图拿到undefined，而歌曲视图依赖了模块加载时生成的全局变量。正确的做法是在每个使用的模块中显式导入并实例化Chance，不要依赖全局变量，避免出现这种奇怪的跨模块依赖问题。

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