利用vue-cli脚手架搭建的项目,使用的是vuejs-templates/webpack的模板。
但在引用第三方组件的时候,在浏览器中报错“exports is not defined”。
根据浏览器报错信息,查询到报错来源是第三方组件的一段代码:vue
Object.defineProperty(exports, "__esModule", { value: true });
这是使用了CommonJs写法,而在应用中并无作相应的模块转换使得浏览器可以识别。而致使这个问题是由于balbel的配置文件.babelrc的问题:webpack
{ "presets": [ ["env", { "modules": false }], "stage-2" ], "plugins": ["transform-runtime"], "comments": false, "env": { "test": { "presets": ["env", "stage-2"], "plugins": [ "istanbul" ] } } }
其中{ "modules": false }阻止了babel进行模块转换,具体见modules配置的说明,因此,将modules改成默认设置便可,或者删除该配置。web
初学Vue中,记录学习中碰见的问题以做备查,若是有不对的地方,还望指正。vue-cli