webpack结合vue使用报错

最新推荐文章于 2025-06-16 09:29:50 发布

原创最新推荐文章于 2025-06-16 09:29:50 发布 · 532 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#babel #webpack #vue

Vue 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了如何解决Babel与Webpack配置不兼容的问题，包括卸载旧版依赖、安装新版依赖、修改.babelrc文件等步骤，同时提供了处理Vue-loader及端口冲突的解决方案。

安装babel包，Error: Cannot find module '@babel/core’ 问题

问题产生的原因

babel-loader和babel-core版本不对应所产生的，

babel-loader 8.x对应babel-core 7.x
babel-loader 7.x对应babel-core 6.x

如何解决

1、卸载旧的babel-core
npm un babel-core
2、安装新的babel-core
npm i -D @babel/core
3、卸载旧的babel-preset
npm un babel-preset-env
npm un babel-preset-stage-0
4、安装新的babel-preset
npm i @babel/preset-react
npm i @babel/preset-env
npm i babel-preset-mobx
5、卸载旧的babel-plugin
npm un babel-plugin-transform-runtime
6、安装新的babel-plugin
npm install --save-dev @babel/plugin-proposal-object-rest-spread
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
7、修改.babelrc文件

{
    "presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-runtime"
    ]
}

原文链接：https://www.jianshu.com/p/74cb6203c39f

webpack打包vue项目，Error: listen EADDRINUSE: address already in use 127.0.0.1:3000

打开cmd(win+R快捷键)
运行netstat -ano，找到报错信息提示的端口号那一行，记住最后那个数字
接下来运行tskill “最后那个数字”，所以这里我运行的是tskill 20212

Vue-loader在15.*之后的版本使用 webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin 报错参考官方文档链接

//在webpack.config.js中加入
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}