解决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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
微信小程序实现图片压缩功能
Jan 26 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 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
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
php实现word转html的方法
2016/01/22 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
jQuery实现跨域
2015/02/03 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
Preload基础使用方法详解
2020/02/03 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
Python批量修改文件后缀的方法
2014/01/26 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
十八大感想感言
2014/02/10 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
社会实践活动总结报告
2014/04/29 职场文书
党员示范岗材料
2014/12/19 职场文书
工资证明格式模板
2015/06/12 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
z-index不起作用
2021/03/31 HTML / CSS
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL