webpack---安装vue-loader vue-template-compiler失败

最新推荐文章于 2023-11-08 17:46:17 发布
最新推荐文章于 2023-11-08 17:46:17 发布
阅读量444 收藏 1
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44765926/article/details/105939762
版权

webpack—安装vue-loader vue-template-compiler失败

安装vue-loader，vue-template-compiler时报错,如图，希望会的大佬解答一下
在这里插入图片描述

<%ĀĀÖ>᭄安•好梦࿐
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
md-vue-loader:Webpack加载器，用于将Markdown编译为Vue
05-01
md-vue-loader md-vue-loader是一个Webpack加载器，用于将Markdown文件作为Vue组件导入。 :person_raising_hand: 为什么？ :raising_hands: 从与Vue公司的任何版本兼容解耦（ / vue-template-compiler ）！ :woman::artist_palette: Vue代码渲染将Vue代码块渲染为嵌入式演示！ :gear: 可定制的将您的演示配置为语法突出显示或包装在任何组件中！ :rocket: 安装 npm i -D md-vue-loader :vertical_traffic_light: 快速设置 添加到您的Webpack配置中： module.exports = { module: { rules: [ + { + test: /\.md.vue$/, + use: [ + 'vue-loader', +
htmlvue-loader:Webpack加载器，用于将HTML编译为Vue
05-01
htmlvue-loader Webpack加载器，用于将HTML编译为Vue :person_raising_hand: 为什么？ :potable_water: 管道连接到vue-loader ，不依赖于vue-template-compiler :writing_hand: 支持SVG和任何其他XML格式！ :recycling_symbol: 可重用性保留HTML / SVG文件以实现可重用性 :gear: 可配置的添加v-pre ， v-once指令和转换器 :fire: 快速仅执行最低要求 :rocket: 快速设置 安装 npm i -D htmlvue-loader 添加到您的Webpack配置 在其上方插入vue-loader ，以将其编译为Vue组件。 ... module : { rules : [ ... , { test : / \. ( html | svg ) $ / , use : [ 'vue-loader' , 'htmlvue-loader'
Vue-cli3项目配置Vue.config.js实战记录
12-12
Vue-cli3 搭建的项目 界面想对之前较为简洁 之前的build和config文件夹不见了，那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js 文件（是根目录，不是src目录 语法 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? // https:/
webpack2+vue2.0+vue-router2实例
02-24
直接上项目配置： { "name": "web", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", "test": "echo \"Error: no test specified\" && exit 1", "watch": "webpack-dev-server --inline --hot" //用来做热启动，通过命令"webpack-dev-server"可以让改的代码立马生效不用一直每次都跑一下命令"webpack" }, "author": "", "license": "ISC", "dependencies": { "vue": "^2.1.10", "vue-resource": "^1.2.0", "vue-router": "^2.2.1" }, "devDependencies": { "babel-core": "^6.23.1", "babel-loader": "^6.3.2", "babel-preset-es2015": "^6.22.0", "css-loader": "^0.26.1", "file-loader": "^0.10.0", "html-loader": "^0.4.4", "style-loader": "^0.13.1", "vue-html-loader": "^1.2.3", "vue-loader": "^11.1.0", "vue-style-loader": "^2.0.0", "vue-template-compiler": "^2.1.10", "webpack": "^2.2.1", "webpack-dev-server": "^2.4.1" } }
npm err 改正错误 清除缓存 安装缺失的vue-template-compiler
weixin_42924048的博客
12-17 982
程序员日记5.22 npm ERR! Unexpected end of JSON input while parsing near ‘…,“dist”:{“shasum”:"af’ 执行的时候下载安装报错 cmd命令行，执行npm cache clean --force 清除缓存区，最后重新安装npm install安装成功了，npm安装成功了， 完美契合新的文件夹，安装成功 继续进行下去，还是报错:最后发现是vue-template-compiler没有安装或版本不一致导致的； 重新安装npm inst
已解决 Bug: Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a comp
从前端设计到后端实现，从云技术到人工智能，这里分享最新的技术见解和实践经验。一起学习，一起进步！
09-18 521
猫头虎博主来了！。我们将一起了解这个 Bug 的原因，解决方法，以及如何避免。希望大家能够从中受益，少走弯路。Vue 是一个强大且灵活的前端框架，但在使用过程中，我们仍然需要注意依赖关系和版本匹配的问题。希望通过这篇文章，大家可以更好地理解和解决这个特定的 Bug，提高开发效率。
解决Vue项目中的“Cannot find module ‘vue-template-compiler‘”错误
Sun_blog
09-18 6718
在Vue项目中遇到“Cannot find module ‘vue-template-compiler’”错误时，我们可以通过安装vue-template-compiler模块、检查Vue版本、清除缓存并重新安装依赖、检查webpack配置以及检查其他依赖模块等方法来解决问题。希望本文对你解决这个错误有所帮助！
vue编译原理之vue-template-compiler
前端精髓
08-11 1万+
vue-template-compiler是编译vue模板的包，传入模板返回AST抽象语法树。 const compiler = require('vue-template-compiler') const val = compiler.compile('<span class="active" :total="count">666</span>') 输出结果如下： const res = { ast: { type: 1, tag: 'span',
vue-loader和vue-template-compiler安装的问题
weixin_45344741的博客
08-29 1664
这是vue和vue-template-compiler版本不一致导致的。查看vue-template-compiler版本。
解决vue-template-compiler 版本不一致
n1234567896的博客
05-09 1175
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compilz
解决vue-loader加载不上的问题
01-18
前言： webpack 整合vue 的时候，遇到了一个大坑，找了好多资料...cnpm i vue-loader vue-template-compiler -D webpack.config.js 中配置相关信息 注意：这里配置好了 再给大家看一下 我的 package.json 文件 注意：
go-bbs 学习 安装前端的时候报错： ERROR Cannot find module ‘vue-template-compiler‘
最新发布
qq_51110402的博客
11-08 127
使用 npm i -g vue-template-compiler 显示添加了3个包。但不一定会成功安装依赖！成功安装依赖如上图： 展示出来。然后运行就没有问题。
Error: Cannot find module ‘vue-template-compiler‘解决vue跑项目报的问题
m0_62725795的博客
07-14 1040
解决方法三：手动升级或降级依赖版本 你可以手动升级或降级依赖的版本，以解决依赖冲突。参数来安装依赖，它将启用旧版本的依赖解析算法，可能可以解决依赖冲突问题。运行以下命令尝试使用。请注意，在手动修改依赖版本时，确保所选择的版本是相互兼容的，以避免引入其他问题。的版本要求，你可以尝试将它们的版本进行调整，使其符合要求。文件中找到这两个依赖项，然后手动修改它们的版本号，再运行。参数来强制解决依赖冲突。运行以下命令尝试使用。参数 你可以在安装依赖时使用。参数 你也可以尝试使用。然后删除项目目录下的。
VUe安装的时候遇到的二个报错。vue@2.2.2 vue-template-compiler@2.3.4 npm 2.15.1 should be =>3.0.0
肖肖肖丽珠的博客
07-01 3206
这是因为vue和vue-template-compliler的版本不一致。你再下载一个新的vue@2.3.4，是他们两个版本一样就可以啦。 在命令提示行里输入：cnpm i vue@2.3.4
vue版本与vue-template-compiler版本不匹配（Build failed with errors）
Mr.Tang的博客
07-13 5045
vue版本与vue-template-compiler版本不匹配（Build failed with errors）
Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible co
阿小绿的博客
06-24 2261
报错的大概意思就是：你当前的 vue版本和vue-template-complier版本不匹配，八字不合！ vue 启动时，出现以下错误： Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options. 把node_modules 删除之后，输入以下命令(一定这个顺序)：.
解决vue和vue-template-compiler版本不一致问题
热门推荐
qq_53499304的博客
03-18 3万+
解决Vue和Vue-template-complier版本不一样问题
Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible...
秃头小吴
12-17 874
这两天学习webpack，安装vue搞出一个一个错误：查资料解决后记录一下，奉上参考地址，在这记录一下，防止遗忘 https://blog.csdn.net/qq_42899245/article/details/118189209 Error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed
vue-template-compiler must be installed as a peer dependency...
zhangxiaodui的博客
03-20 952
vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options
安装webpack-vue
04-25
Sure, 我可以帮你安装webpack和vue。你可以按照以下步骤操作： 1. 首先，你需要安装Node.js和npm。你可以在官方网站上下载并安装它们：https://nodejs.org/ 2. 然后，你需要创建一个新的项目文件夹，并在终端中打开它。 3. 运行以下命令来初始化项目： ``` npm init -y ``` 这将创建一个默认的package.json文件。 4. 接着，你需要安装webpack和webpack-cli： ``` npm install webpack webpack-cli --save-dev ``` 5. 安装vue和vue-loader： ``` npm install vue vue-loader vue-template-compiler --save-dev ``` 6. 在项目根目录下，创建一个webpack.config.js文件，并加入以下配置： ```javascript const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { entry: './src/main.js', module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader' }, { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] } ] }, plugins: [ new VueLoaderPlugin() ], output: { filename: 'bundle.js', path: __dirname + '/dist' } } ``` 7. 在项目根目录下，创建一个src文件夹，并创建main.js和App.vue文件： main.js: ```javascript import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) }); ``` App.vue: ```html <template> <div> <h1>Hello, Vue!</h1> </div> </template> ``` 8. 在index.html页面中，添加一个id为app的div元素。 9. 在终端中运行以下命令来编译项目： ``` ./node_modules/.bin/webpack ``` 10. 打开生成的dist文件夹中的index.html页面，你应该能看到一个 “Hello, Vue!”的标题。 希望这些步骤能够帮助你完成webpack和vue的安装和配置。如果你有任何问题，请在问吧！

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值