vue部署生产环境时swiper报错及其解决办法

Cannot assign to read only property ‘exports’ of object '#'问题

在vue中使用swiper，最常考虑的就是直接下载插件

npm install swiper --save

毕竟省心又简单。

然鹅，近期开发的项目，有用到swiper，测试环境一切正常，生产环境部署时开始报错：

由于生产环境浏览器版本比较低，不兼容es6语法，直接使用插件的路走不通

于是，那就直接引入swiper.js和swiper.css文件

import Swiper from"../../assets/mainPage/pub-ui/js/swiper.min"

然后，又开始了报错……

点开错误文件，

似乎丝毫没有意义
同过谷歌查找，和论坛各种搜索:

原因如下：

The code above is ok. You can mix require and export. You can‘t mix import and module.exports.

翻译过来就是说，代码没毛病，在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports

因为webpack 2中不允许混用import和 module.exports

webpack里面有一个编译器叫Babel，负责把ES6的语言转化为commonJS以兼容绝大多数浏览器。当你混用这两个语法的时候你可以使用babel的commonJS模式帮你把import编译成require。

然而第二种情况就是你要使用@babel/plugin-transform-runtime这个插件的时候，同时你又在某个commonJS写的文件里使用这个插件时，babel会默认你这个文件是ES6的文件，然后就使用import导入了这个插件，从而产生了和第一种情况一样的混用错误。解决方法是在babel.config.js里配置unambiguous设置，让babel和webpack一样严格区分commonJS文件和ES6文件。

于是把package.json的 "babel-plugin-transform-runtime"删掉，node_modules里也删掉，发现还是没用

之后……

把.babellrc文件里的"transform-runtime"删掉，终于搞定！