【Vue,webpack】报错解决(Module parse failed: Unexpected token (1:0) You may need an appropriate loader)


文章首发—


错误如下:

在这里插入图片描述

webpack默认是不能处理vue文件,所以只能我们自己添加一些额外的插件进行处理它。

解决方式:
第一步:安装插件

cnpm i vue-loader vue-template-compiler --save-dev 

第二步:在webpack.config.js添加如下配置:

 module: {
        rules: [
            {
      		  test: /\.vue$/,
        	  use: {
             	loader: 'vue-loader'
        	  }
           },
        ]
    }


然后重新运行,如果还报错可能是vue-loader 版本的原因,你的版本太高了。

我们又两种方式来解决这个问题:

方式一:减低vue-loader 的版本

将vue-loader 的版本减低问14.0.0 以下。

cnpm i vue-loader@13.0.0 --save-dev

方式二:额外的在 webpack.config.js 添加一些配置。

//引入vue-loader/lib/plugin
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports  = {
    plugins: [   
        new VueLoaderPlugin()
    ],
    module: {
        rules: [
            {
      		  test: /\.vue$/,
        	  use: {
             	loader: 'vue-loader'
        	  }
           },
        ]
    }
};

  • 4
    点赞
  • 13
    收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

阿清呀.

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值