vue-loader兼容性采坑：No parser and no filepath given, using 'babylon'...

最新推荐文章于 2024-05-22 13:18:25 发布
最新推荐文章于 2024-05-22 13:18:25 发布
阅读量3.3k 收藏
点赞数 2
分类专栏： 前端技术 文章标签： webpack vue-loader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011077672/article/details/87016308
版权

现象

在webpack dev开发环境，部署了vue-loader@14.2.2版本，编译后在命令行报一系列的No parser and no filepath given, using ‘babylon’…信息，让人一开始无法定位问题出在哪里？

解决方案

更新到14.2.4，虽然当前最新的是15.6.5版本，不过从v14迁移到v15会有不少变更，配置不好也会报错，具体参见https://vue-loader.vuejs.org/zh/migrating.html

npm install -D vue-loader@14.2.4
bazingaedward
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue - Syntax Error: TypeError: this.getOptions is not a function 项目运行时报错，详细解决方案
王佳斌
11-07 4590
vue2，Syntax Error: TypeError: this.getOptions is not a function，webpack，npm run serve，报错怎么办，运行报错，run serve时出现报错如何解决，vue2项目运行报错this.getOptions is not a function，vue2怎么解决npm run serve时的Syntax Error: TypeError: this.getOptions is not a function爆红报错，Vue - Synt
vue 使用 eslint 报错 [vue/no-parsing-error] Parsing error: x-invalid-end-tag.
热门推荐
Amy的博客
07-19 4万+
项目环境及编辑器 项目框架：vue iview 编辑器：vscode 错误提示 见下图：[vue/no-parsing-error] Parsing error: x-invalid-end-tag. 原因 Col components are wrong in eslint-plugin-vue 解决办法 以下三种办法都能搜出来，这里做个总结以及记录遇到的问题： 作者给出的办法 关闭...
No parser no filepath given问题解决
dianmei9350的博客
06-27 347
关于 vue 项目 run dev 的时候，控制台警告： No parser and no filepath given, using 'babylon' the parser now but this will throw an error in the future. Please specify a parser or a file path so one can be infe...
nodejs搭建的vue项目警告No parser and no filepath given。。。
只此浮生是梦中
06-08 8667
npm run dev 警告： No parser and no filepath given, using ‘babylon’ the parser now but this will throw an error in the future. Please specify a parser or a filepath so o ne can be inferred. 解决办法： np...
No parser and no filepath given, using 'babel' the parser now but this will throw an error in t he f
_夜渐凉
09-25 1万+
nodejs搭建的vue项目，编译后在命令行发生警告： No parser and no filepath given, using 'babel' the parser now but this will throw an error in t he future. Please specify a parser or a filepath so one can be inferred. 可...
vue 项目启动时，警告“No parser and no filepath given”如何解决？
GWQ_CY的博客
05-31 1493
启动vue项目经常遇到的错误
No parser and no file path given, couldn't infer a parser.
qq_31150171的博客
05-28 358
解决方法：先npm install --save-dev prettier@1.12.0再npm run dev错误如下：error in ./src/App.vueModule build failed: Error: No parser and no file path given, couldn't infer a parser.at normalize (F:\WebStormProjec...
使用低版本的vue-loader遇到的坑之ValidationError: Invalid options object. CSS Loader has been initialized using
qq_41687400的博客
08-07 1万+
使用低版本的vue-loader遇到的坑 最近在学习使用webpack打包vue项目，所以一开始下载了vue-loader和vue-template-compiler，但是由于现在15版本的vue-loader需要引入一个插件才能使用，我为了省事，在下载的时候指定了vue-loader的版本是14.2.2，一开始打包什么的都没问题，但是后来加入了style-loader和postcss-loader以及其他的杂七杂八的loader和plugin之后，我使用webpack打包就老是报错，（使用webpack-
vue-loader.conf.js文件
倾世~茹薇
04-27 3185
这个js文件中的代码：'use strict'const utils = require('./utils')const config = require('../config')const isProduction = process.env.NODE_ENV === 'production'const sourceMapEnabled = isProduction ? config.buil...
Vue项目，安装less，less-loader，报错【TypeError: this.getOptions is not a function】解决办法
苏小姐的茶
03-23 3688
问题：Vue项目，安装less和less-loader ， 报错【Syntax Error: TypeError: this.getOptions is not a function】 报错如下： 报错原因： 在可视化页面里，默认安装最新版本的less和less-loader，而最新版本的依赖包往往不稳定，容易出现问题，所以，我们应该安装稳定的版本。 解决办法： 1.先卸载掉原先的版本 2.通过命令行的方式安装指定的版本（注意：在你当前项目里安装即可，不用全局安装，所以加...
vue-loader 高版本不兼容 require文件引入
素钗一生推
03-04 2430
在移动代码到其他机上，重新安装依赖的时候，基于mint ui的页面，带有Indicator的界面，在触发了Indicator.open()方法之后发现页面只生成了一个div,没有其他spinner等内容，调试的时候发现是直接使用cnpm i命令安装依赖，按package.json，安装的都是高版本，导致mint ui组件当中，require进来的组件资源，无法解析，导致Indicator呈现出...
运行vue项目警告：No parser and no filepath given....
yq_giveYouMoney的博客
12-08 1329
yarn serve运行vue项目时警告：No parser and no filepath given, using 'babylon' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred. 解决方法：因为v...
记一次using 'babel' the parser now but ....报错
凉某的博客
04-06 4945
错误 改了点东西，使用“npm run dev”编译时总是报错“No parser and no filepath given, using ‘babel’ the parser now but this will throw an error in the future. ”，网上找的答案都是改变组件的版本号，但是我的情况显然并不是版本的原因造成。因为之前是可以成功编译的，但是改了一点点东西后就...
No parser and no filepath given，using 'babylon' the ...
柏灿的博客
08-19 3554
VUE项目run dev 的时候报 No parser and no filepath given, using 'babylon' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred. 可能原因是vue-l...
App.vue{ parser: "babylon" } is depr 95% emitting
skalpat的博客
04-23 1777
我的也是发现这个错误，是prettier版本导致的，直接在项目中：cnpm install prettier@~1.12.0 -D或者cnpm install prettier@~1.12.0 --save-dev,然后重新npm run dev就可以了
npm run dev 提示 { parser: “babylon“ } is deprecated； we now treat it as { parser: “babel“ }.
weixin_42091617的博客
07-05 4374
npm run dev 提示 { parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
{ parser: “babylon“ } is deprecated； we now treat it as { parser: “babel“ }
Wangxiaoming118的博客
11-19 175
打开cmd 输入set NODE_OPTIONS=–openssl-legacy-provider 在npm run dev 就好了。修复上游依赖冲突，否则retryERR!使用——force来执行这个命令。接受不正确(并且可能损坏)的依赖项解析。有可能是node版本和npm版本bu匹配导致的，参考一下链接解决问题。大概意思是当前包的依赖项和之前安装的某些包需求的依赖项有冲突。使用element-admin框架，node版本过高报错。
npm run dev ：{ parser: “babylon“ } is deprecated； we now treat it as { parser: “babel“ }
SigoK的博客
06-20 396
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }
PARSER: “BABYLON” } IS DEPRECATED； WE NOW TREAT IT AS { PARSER: “BABEL”}
最新发布
weixin_45041493的博客
05-22 324
PARSER: “BABYLON” } IS DEPRECATED； WE NOW TREAT IT AS { PARSER: “BABEL”}
vue-loader.conf.js
07-13
`vue-loader.conf.js` 是一个用于配置 Vue 单文件组件加载器（vue-loader）的配置文件。它一般用于 Vue CLI 2.x 中的 webpack 配置。 在 Vue 项目中，`.vue` 文件是一种特殊的文件类型，包含了模板、脚本和样式等组件相关代码。为了能够在 webpack 构建过程中解析和处理这些 `.vue` 文件，我们需要使用 vue-loader。 `vue-loader.conf.js` 文件中的配置项会被用于 vue-loader 的加载过程，以定义如何解析和转换 `.vue` 文件中的各个部分。 下面是一个简单的 `vue-loader.conf.js` 示例： ```javascript // vue-loader.conf.js module.exports = { loaders: { css: 'vue-style-loader!css-loader', scss: 'vue-style-loader!css-loader!sass-loader' // 其他加载器配置... } }; ``` 在上述示例中，我们定义了 `css` 和 `scss` 两个加载器的配置。这些配置会告诉 vue-loader 如何处理 `.vue` 文件中的样式部分。 注意，以上示例中的加载器配置是基于 webpack 1.x 的写法。在 webpack 2.x 或更高版本中，可以使用 `rules` 或 `module.rules` 来定义加载器规则。例如： ```javascript // vue-loader.conf.js module.exports = { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] }, { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ] } // 其他加载器规则... ] }; ``` 在上述示例中，我们使用 `rules` 定义了两个加载器规则，分别用于处理 `.css` 和 `.scss` 文件。 `vue-loader.conf.js` 中的配置还可以包括其它一些选项，如预处理器的配置、CSS Modules 的开启等。具体配置项可以参考 vue-loader 的文档。 总之，`vue-loader.conf.js` 是一个用于配置 vue-loader 的文件，用于定义如何解析和处理 Vue 单文件组件中的各个部分。在 Vue CLI 2.x 中，它被用作 webpack 配置文件的一部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值