解决vue项目导入js报does not provide an export named 'defanlt’错误问题

问题描述

使用webpack打包的umd格式的js插件导入到vue2项目中无法使用，报错如下：
SymtaxError: The reguested module '/xxxin js’does not provide an export named 'defanlt’

vue-cli版本不同现象：

• vue-cli 4.5.15会报’does not provide an export named 'defanlt’错误
• vue-cli 4.5.12不会报错，但变量会变成undefined

遇到这个问题后一顿百度+Google搜索，搜索到的答案大部分都说是导入方式的问题，于是按照搜索到的答案改导入方式

一开始的导入方式：import ATest from './test.js
按百度搜索到的导入方式：import * as ATest from './test.js
然后输出ATest，结果变成了这样

解决问题

后面经过各种查询终于找到了原因，原来vue-cli 3.0及以上版本默认禁止了 commonjs 语法
问题找到了，解决起来也就快了，只需要使用@babel/plugin-transform-modules-commonjs插件即可
解决步骤：

1. 执行命令安装babel：npm install --D @babel/plugin-transform-modules-commonjs
2. 在项目根目录创建一个 babel.config.js（如没有的情况下）

3. 配置 babel.config.js
   然后在babel.config.js文件中配置

   module.exports = {
     plugins: [
    [
      '@babel/plugin-transform-modules-commonjs',
      {
        allowTopLevelThis: true
      }
    ]
     ]
   }

   自此问题完美解决