解决vue-loader加载不上的问题


Posted in Javascript onOctober 21, 2020

前言:

webpack 整合vue 的时候,遇到了一个大坑,找了好多资料才弄好

我们知道 webpack - - -默认 无法解析 .vue 为后缀的文件,所以webpack需要下载一个解析 .vue 文件的 loader

下载 vue-loader 的方法有许多 ,我是 使用

vue-loader 是要依赖 vue 的,所以先下载 vue

npm i vue -S

cnpm i vue-loader vue-template-compiler -D

webpack.config.js 中配置相关信息 注意:这里配置好了

解决vue-loader加载不上的问题

再给大家看一下 我的 package.json 文件

注意:

css-loader style-loader 等等 我都已经下载配置完成

{
 "name": "webpack-study",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "babel-core": "^6.26.3",
 "babel-loader": "^7.1.5",
 "babel-plugin-transform-runtime": "^6.23.0",
 "babel-preset-env": "^1.7.0",
 "babel-preset-stage-0": "^6.24.1",
 "css-loader": "^1.0.0",
 "file-loader": "^2.0.0",
 "html-webpack-plugin": "^3.2.0",
 "less": "^3.8.1",
 "less-loader": "^4.1.0",
 "node-sass": "^4.9.3",
 "sass-loader": "^7.1.0",
 "style-loader": "^0.22.1",
 "url-loader": "^1.1.1",
 "vue-loader": "^15.4.1",
 "vue-template-compiler": "^2.5.17",
 "webpack": "^4.17.1",
 "webpack-dev-server": "^3.1.5"
 },
 "dependencies": {
 "vue": "^2.5.17",
 "webpack-cli": "^3.1.0"
 }
}

重头戏来了,即使这样 运行 : npm run dev

解决vue-loader加载不上的问题

仍然无法识别 vue-loader

错误原因:

vue-loader@15.*之后除了必须带有VueLoaderPlugin

解决方案:

需要使用插件VueLoaderPlugin

在webpack.config.js里用const VueLoaderPlugin = require('vue-loader/lib/plugin')引入,

然后在module.exports对象里添加plugins:[new VueLoaderPlugin()]

解决vue-loader加载不上的问题

再次 运行 项目 就可以啦~~~

补充知识:vue-loader加载不上报错* ./node_modules/vue-loader/lib/index.js You may need an additional loader to handle

报错代码:

ERROR in ./src/login.vue?vue&type=template&id=19e76240& 2:0
Module parse failed: Unexpected token (2:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
> <h1>这是使用.vue文件渲染出来的</h1>
| 
| 
 @ ./src/login.vue 1:0-84 10:2-8 11:2-17 30:4-35:6 30:68-35:5 32:16-22 33:25-40
 @ ./src/main.js

解决办法:

const path = require('path');
const htmlWebpackplugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); 
 
module.exports = {
  entry: path.join(__dirname,'./src/main.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new htmlWebpackplugin({ //创建一个在内存中生成的html页面的插件
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html'
    }),
    new VueLoaderPlugin()
  ],
  module: { //这个节点用于配置所有的第三方模块加载器
    rules: [
      {test: /\.css$/, use:['style-loader','css-loader']},//配置处理.css文件的第三方处理规则
      {test: /\.less$/, use: ["style-loader",'css-loader','less-loader']},
      {test: /\.scss$/, use: ["style-loader",'css-loader','sass-loader']},
      {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=8000"},
      {test: /\.(tff|eot|svg|woff|woff2)$/, use: "url-loader"},
      {test:/\.js$/, use:'babel-loader',exclude:/node_modules/},
      {test: /\.vue$/, use: 'vue-loader'}
    ]
  }
};

出来需要配置{test: /\.vue$/, use: 'vue-loader'}这个外,还需要载webpack.config.js配置文件中加两行代码:

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

new VueLoaderPlugin()

以上这篇解决vue-loader加载不上的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
Javascript之Math对象详解
Jun 07 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 #Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 #Javascript
uniapp实现可滑动选项卡
Oct 21 #Javascript
element中table高度自适应的实现
Oct 21 #Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 #Javascript
原生小程序封装跑马灯效果
Oct 21 #Javascript
uniapp实现横向滚动选择日期
Oct 21 #Javascript
You might like
php生成WAP页面
2006/10/09 PHP
yii用户注册表单验证实例
2015/12/26 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
vue自动化路由的实现代码
2019/09/30 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
十条建议帮你提高Python编程效率
2016/02/16 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
python实现拼图小游戏
2020/02/22 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
python能在浏览器能运行吗
2020/06/17 Python
django和flask哪个值得研究学习
2020/07/31 Python
基于Python实现粒子滤波效果
2020/12/01 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
平安工地建设方案
2014/05/06 职场文书
学习心理学的体会
2014/11/07 职场文书
综合管理员岗位职责
2015/02/11 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
纪委立案决定书
2015/06/24 职场文书
自信主题班会
2015/08/14 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers