关于vuejs-templates/webpack 中 “exports is not define

nicercode 发布于2019-08-20 16:46 / 2838人阅读

摘要：利用脚手架搭建的项目，使用的是的模板。但在引用第三方组件的时候，在浏览器中报错。根据浏览器报错信息，查询到报错来源是第三方组件的一段代码这是使用了写法，而在应用中并没有做相应的模块转换使得浏览器能够识别。

利用vue-cli脚手架搭建的项目，使用的是vuejs-templates/webpack的模板。
但在引用第三方组件的时候，在浏览器中报错“exports is not defined”。
根据浏览器报错信息，查询到报错来源是第三方组件的一段代码：

Object.defineProperty(exports, "__esModule", {
  value: true
});

这是使用了CommonJs写法，而在应用中并没有做相应的模块转换使得浏览器能够识别。而导致这个问题是因为balbel的配置文件.babelrc的问题：

{
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

其中{ "modules": false }阻止了babel进行模块转换，具体见modules配置的说明，所以，将modules改为默认设置即可，或者删除该配置。

初学Vue中，记录学习中遇见的问题以作备查，如果有不对的地方，还望指正。

云服务器 GPU云服务器关于JAVA中顺序IO的基本操作关于平台关于加班关于学习

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83143.html

自定义自己的vue-cli模板

摘要：自定义自己的模板在使用的过程中，常用的模板只为我们提供最基础的内容，但每次需要新建一个项目的时候就需要把之前项目的一些配置都搬过来，这样就造成挺大的不方便，如果是作为一个团队，那么维护一个通用的模板，我认为是挺有必要的。自定义自己的vue-cli模板在使用vue-cli的过程中，常用的webpack模板只为我们提供最基础的内容，但每次需要新建一个项目的时候就需要把之前项目的一些配置...

付永刚 2019-08-21 17:42 评论0 收藏0
自定义自己的vue-cli模板

摘要：自定义自己的模板在使用的过程中，常用的模板只为我们提供最基础的内容，但每次需要新建一个项目的时候就需要把之前项目的一些配置都搬过来，这样就造成挺大的不方便，如果是作为一个团队，那么维护一个通用的模板，我认为是挺有必要的。自定义自己的vue-cli模板在使用vue-cli的过程中，常用的webpack模板只为我们提供最基础的内容，但每次需要新建一个项目的时候就需要把之前项目的一些配置...

Sleepy 2019-08-01 18:01 评论0 收藏0
Vue-Donut——专用于构建Vue的UI组件库的开发框架

摘要：相信不少使用的开发者和公司都有定制一套属于自己的组件库的需求。针对这个问题，我搭建了一个专门用来构建的组件库的开发框架，以节省搭建环境的劳动力，专心于组件库的开发。首先我们尝试了使用的方案，就是把组件库直接作为项目的子模块使用。 showImg(https://segmentfault.com/img/bVNais?w=1226&h=1159); 相信不少使用Vue的开发者和公司都有定...

stormgens 2019-08-20 16:19 评论0 收藏0
vue-cli 使用 webpack-bundle-analyzer

摘要：才来公司，填坑。然后发现项目打包越来越大。然后就满世界找解决方法。网上看到这个神器。然后我配置完毕各种报错。然后去看的官方文档。然后找到然后再看文档。看这段不用配置任何，在的时候添加参数就好啦。然后运行一下，浏览器访问。浪费几多时间。才来公司，填坑。然后发现项目打包越来越大。然后就满世界找解决方法。网上看到 webpack-bundle-analyzer 这个神器。然后各种说配置 ...

bingchen 2019-08-21 18:29 评论0 收藏0
搭建一个多页面的无依赖的工程化项目

摘要：也就是说，我们需要做一个非单页应用的工程化项目。现在这个项目的静态资源是以文件哈希值来控制的。这个该怎么解决呢感谢，我们可以通过如下的配置来实现意思就是如果图片是在中引用的则不加哈希值，在文件中引入的则加上。最近金拱门比较火，我们先戳开它的官网看看。看完后，如果你老板要是让你做这么一个网站，一定要seo，一定要兼容IE，你会怎么去做呢？用vue/react吧，单页应用满足不了se...

go4it 2019-08-21 17:18 评论0 收藏0