简述

因为 vue 中引入 node_modules 文件夹下的库不会再进行编译处理了,所以就导致 引入库中存在 ES6jsx 语法的时候会报错,至于为什么浏览器是支持 ES6 语法但为什么在运行时还是会出错这个暂时就不得而知了

正文

vue-cli 搭建好项目后,在项目里下载了 element-ui 库,然后在main文件中引入,测试使用正常。然后把 node_modules/element-ui 文件夹的 package.json 里面的入口文件改成 src/index.js 运行,发现提示运行错误
在这里插入图片描述
显示这样是因为 element-ui 2.7以上版本增加了 jsx 语法,我们需要添加 jsx依赖才能正常运行

npm install --save-dev babel-plugin-syntax-jsx  babel-plugin-transform-vue-jsx  babel-helper-vue-jsx-merge-props  babel-preset-env

安装完后还需要在 .babelrc 文件中添加对 jsx 插件的配置:

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ],
  "plugins": ["transform-vue-jsx"]
}

安装完后我们再次运行项目,发现这次提示的又是另一个问题
在这里插入图片描述
这里的大致意思说 icon-warning.vue 这个文件使用了 ts语法,但是我们没有 ts 语法解析依赖。打开这个文件我们可以看到在 script 标签上设置了 lang="ts",去掉或安装 ts 依赖即可解决(icon-info.vue文件也是一样的问题)
这个问题解决完后我们再次运行,它又提示了如下错误
在这里插入图片描述
看到这里我突然就懵了,为什么会提示说无法处理这个文件类型呢,难道是少了什么依赖。后面我直接把整个 element-ui 文件夹拎出来放到 app.vue 同级引入,经历了一个小时的路径调整,一运行居然正常的
运行正常的话那就说明依赖没有问题,那为什么会提示文件类型问题呢?后来仔细研究了下报错位置,发现中间有个 es6 的 ... 运算符,会不会是这个的问题呢,想到这我就把这个语句给注释掉了,果然,重新运行就正常了。
到这里我终于明白报错的原因了,但是为什么会这样呢?后面找资料才发现,原来引入的 node_modules 文件夹的库是不会再进行编译的,在编译的时候无法识别这个语法,所以导致的出错。知道问题了就好解决了,既然引入的时候没有编译,手动操作引入后编译就行了 (具体引入操作可以参考:https://blog.csdn.net/Name_CGH/article/details/122375563)

webpack.config.js 文件中配置

{
        test: /\.js$/,
        loader: 'babel-loader',
        // exclude: /node_modules/,
        include: [
          path.resolve("node_modules/element-ui/packages/table/src/store/tree.js"),
          path.resolve("node_modules/element-ui/packages/slider/src/marker.js"),
          path.resolve("node_modules/element-ui/packages/table/src/config.js"),
          path.resolve("node_modules/element-ui/packages/table/src/table-body.js"),
          path.resolve("node_modules/element-ui/packages/table/src/table-footer.js"),
          path.resolve("node_modules/element-ui/packages/message/src/main.js"),
          path.resolve("node_modules/element-ui/packages/scrollbar/src/main.js"),
          path.resolve("node_modules/element-ui/packages/scrollbar/src/bar.js"),
          path.resolve("node_modules/element-ui/packages/pagination/src/pagination.js"),
          path.resolve("node_modules/element-ui/packages/descriptions/src/index.js"),
          path.resolve("node_modules/element-ui/packages/descriptions/src/descriptions-row.js"),
          path.resolve("node_modules/element-ui/packages/table/src/table-header.js"),
          path.resolve("node_modules/element-ui/packages/tooltip/src/main.js"),
          path.resolve("node_modules/element-ui/packages/table/src/table-column.js")
        ]
      },

最终解决问题

Logo

前往低代码交流专区

更多推荐