创建vue2新项目后报错的排错

使用vue create name创建vue2项目后,根据老项目的版本一顿安装各种依赖组件(内网开发库更新不及时所以用之前的版本省事<血泪教学..>),然后排一下遇到的报错,由于我底层基础知识不扎实排查问题能力有待提高,排了很多次由此记录

一.先是报错babel-polyfil,具体内容没有截取所以直说解决方案几个(面向百度),根据自己具体报错查看

解决方法:

1. 模块找不到：

   • 错误信息：Error: Cannot find module 'babel-polyfill'

   • 解决方法：确保已经通过 npm 或 yarn 安装了 babel-polyfill。可以使用 npm install --save babel-polyfill 或 yarn add babel-polyfill 来安装。

2. 版本不兼容：

   • 错误信息：可能会有关于 __webpack_require__ 的错误或警告。

   • 解决方法：确保你的 Babel 和 Webpack 版本与 babel-polyfill 版本兼容。如果有必要，升级或降级这些工具。

3. 使用问题：

   • 错误信息：可能是运行时错误，比如 TypeError: Cannot read property 'bind' of undefined。

   • 解决方法：确保 babel-polyfill 被正确引入。在 webpack.config.js 中，应该在 entry 配置中添加 import 'babel-polyfill'; 或在 .babelrc 中配置 "presets": ["env", "stage-2"] 并在 entry 文件的最顶部添加 import 'babel-polyfill';。

4. 配置问题：

   • 错误信息：可能是配置错误，比如 TypeError: Cannot read property 'bind' of undefined。

   • 解决方法：确保 webpack.config.js 中的 module.rules 配置正确，并且 .babelrc 或 babel 配置文件中的配置适合你的项目。

二.报错Unknown option: .useBuiltIns. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.

To be a valid preset, its name and options should be wrapped in a pair of brackets

Maybe you meant to use " preset"

解决方法:

1.webpack babel-loader预设报错 参考webpack babel-loader预设报错_to be a valid preset, its name and options should -CSDN博客

2.webpack版本配置不同,使用core-js出现错误 参考webpack：Unknown option: .useBuiltIns，Maybe you meant to use_unknown option: .usebuiltins.-CSDN博客3.babel7以下无法识别 参考[jest]ReferenceError: [BABEL] unknown: Unknown option - 简书

三.报错You may use special comments to disable some warnings. Use // eslint-disable  

esLint 对语法的要求过于严格  参考vue解决：You may use special comments to disable some warnings.Use // eslint-disable-next-line to ign-CSDN博客

解决方法:

1.关闭eslint语法检测，在.eslintrc.js文件中，注释掉 eslint:recommended。

2.如果你的项目是vue脚手架工程，那么找到项目根目录下的bulid文件夹下的 webpack.base.conf.js，找到以下代码块并注释掉第三行代码 

 module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),  //注释掉该行代码
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
注释完保存退出，重新启动项目即可。

3.当项目并不存在build文件夹，即不属于vue脚手架工程，那请到根目录下 config文件夹下的index.js文件，将useEslint属性设置为false。

4.如果是vue3新项目的话，找不到上面的文件，找到vue.config.js把vue.config.js中的lintOnSave的值改为false即可。但如果在vue.config.js中没有lintOnSave则添加

lintOnSave: false
到

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})
中。然后重新启动就行。

我是用第四种方法解决的  感谢各位大佬的分享,引用总结了一下错误分析,可能不全面欢迎补充指点