搭建vue的webpack项目时出现有关vue-template-compiler错误

最新推荐文章于 2023-05-09 20:19:12 发布
最新推荐文章于 2023-05-09 20:19:12 发布
阅读量1.1k 收藏
点赞数
分类专栏： Web 文章标签： vue-template- vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39376697/article/details/107344489
版权

缘由

在入口文件定义了vue的编译规则，使用vue-loader对.vue文件进行编译和运行，再进行打包时出现以下问题：
在这里插入图片描述

解决方案

  1. 确定package.json文件中dependencies是否定义了vue-template-compiler的版本，如果没有则需进行定义，版本号需要与vue的版本一致
  2. 使用npm i vue-template-compiler命令进行安装相应版本的模块

【版本不一致，需要修改成一致的】

WihauShe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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" } }
解决Vue项目中的“Cannot find module ‘vue-template-compiler‘”错误
最新发布
Sun_blog
09-18 7438
在Vue项目中遇到“Cannot find module ‘vue-template-compiler’”错误时，我们可以通过安装vue-template-compiler模块、检查Vue版本、清除缓存并重新安装依赖、检查webpack配置以及检查其他依赖模块等方法来解决问题。希望本文对你解决这个错误有所帮助！
vue初始化项目时报错： Error: Cannot find module ‘vue-template-compiler‘
二三的博客
07-14 1万+
出现这个问题的原因是缺少了 ‘vue-template-compiler’ 模块。这类问题解决方案基本上都一样，网上也很多，在这里我写个随笔记录下。1、在项目内运行命令： 2、全局安装 使用上面两个任意一个方案即可，输入 命令，即可成功启动项目...
vue2.5.10升级到2.6.10时vue-template-compiler提示不兼容问题
好好学习，不断总结
09-19 6175
使用前提 vue webpack环境 升级node版本 升级npm版本 npm update 以上操作还不行，删掉package-lock.json里面的 “vue-template-compiler”: { “version”: “2.6.10”, “resolved”: “https://registry.npm.taobao.org/vue-template-compiler/downlo...
vue学习——webpack项目搭建（一）
征途无悔
04-01 614
创建项目 首先要安装nodejs，因为我们要用npm。这个过程我就不赘述了，一下我们直接按照安装好的来用。 　　我们选用的IDE是VS Code。原因嘛，因为我看的教程是用这个的（比人是写java的，没有啥专有的前端偏好，就是觉得eclipse、idea这类的IDE写现在的工程化前端，又重又不顺手。并且也对比了以前前端朋友介绍的IDE，如hbuilder、webstorm，hbuilder命令行不...
webpack配置VUE
qq_57611356的博客
06-16 131
runtime-only/compiler版本 vue构建了两类版本：区别在于打包中的main.js文件 runtime-compiler:代码中，可以有template，compiler会编译template template->ast->render->vdom->UI new Vue({ el:'#app', template:<App/>, //使用 components:{App}}) //注册 runtime-...
htmlvue-loader:Webpack加载器，用于将HTML编译为Vue
05-01
:potable_water: 管道连接到vue-loader ，不依赖于vue-template-compiler :writing_hand: 支持SVG和任何其他XML格式！ :recycling_symbol: 可重用性保留HTML / SVG文件以实现可重用性 :gear: 可配置的添加v-pre ...
md-vue-loader:Webpack加载器，用于将Markdown编译为Vue
05-01
:raising_hands: 从与Vue公司的任何版本兼容解耦（ / vue-template-compiler ）！ :woman::artist_palette: Vue代码渲染将Vue代码块渲染为嵌入式演示！ :gear: 可定制的将您的演示配置为语法突出显示或包装在任何...
laravel-mix-vue3:适用于Vue 3，Typescript和JSX的Laravel Mix扩展
05-28
npm install laravel-mix-vue3 --save-dev//oryarn add laravel-mix-vue3 -D 如果Laravel Mix无法安装以下内容，请确保安装以下内容 npm install @types/webpack-env @vue/compiler-sfc vue-loader@next laravel-...
Vue-cli3项目配置Vue.config.js实战记录
12-12
Vue-cli3 搭建的项目 界面想对之前较为简洁 之前的build和config文件夹不见了，那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js 文件（是根目录，不是src目录 语法 module.exports = {...
Vue3.0学习 - 第二十三节，Vue3.x 中 集成Typescript 使用Typescript
csl125的博客
12-07 1007
Vue3.x 中 集成Typescript 使用Typescript
vue cli创建vue项目（使用typescirpt和vue3）
Q1761991696的专栏
03-02 1070
创建项目 使用 npm 安装 vue-cli 和typescript npm i -g @vue/cli typescript 使用vue create命令快速搭建新项目的脚手架 记得先进入你要放项目的文件夹。 vue create myvue 这里是单项选择，可以按上/下键切换选项，按enter进入下一步。这两个选项分别表示： default是默认选项，后面的babel,eslint表示只会引入这两个 Manully select features是手动选...
解决vue和vue-template-compiler版本不一致问题
weixin_45969944的博客
05-09 2390
其实是vue与vue-cli的版本不匹配，需要将vue的版本与vue-template-compiler的版本调一致就可以了。将“版本”替换为vue-template-compiler的版本。
webpack 搭建Vue环境
小柒的前端之旅
07-16 412
前面的话 这篇文章将介绍如何使用webpack搭建Vue环境 初始化项目 先创建一个根目录：基于webpack搭建Vue环境（这里便于查找中文命名） 在根目录下，命令行中敲入如下命令： npm install - y 会生成一个 包含默认信息的 package.json 文件 。 然后我们在项目文件夹中创建以下几个文件夹： dist src、src/components build 其中，...
记录一次从vue2到vue3的踩坑过程
weixin_49172965的博客
11-20 2476
vue3beta已经上线,最近刚好有一个项目可以让自己随便造,于是就打算使用vue3来造,在此记录下从vue2升级到vue3的一个过程,这里使用的是自己配置的webpack. vue2到vue3中webpack的一些变化 vue2到vue3中webpack打包的配置也发生了一下一些变化(暂时发现): 不再需要vue-template-compiler ,在vue3中,vue-template-compiler被剔除了,不需要这个包,而它的替代品是@vue/compiler-sfc 在执行npm run d
使用webpack搭建Vue3项目的注意点（新手）
mcymmycm的博客
05-27 584
webpack搭建vue3项目需要的注意点 1.vue-template-compiler已经无法使用，使用会出现以下报错 Vue packages version mismatch: - vue@3.0.11 (D:\workSpace\webpackUse\node_modules\vue\index.js) - vue-template-compiler@2.6.12 (D:\workSpace\webpackUse\node_modules\vue-template-compiler\pack
启动vue项目报错ERROR：npm vue-template-compiler@2.6.10包版本问题
jxysgzs的博客
03-04 2935
报错部分代码 error in ./src/views/freeManage/publish/flowPay.vue Module build failed: Error: Vue packages version mismatch: vue@2.6.10 vue-template-compiler@2.6.10 报错原因 package.json与package-lock.js...
vue template compiler模版解析模块源码解析
章鱼小丸子
01-05 8903
文章目录前言vue模版语法定义语法插值指令vue template compiler模版解析器现状定义结构parserHTML解释器optimizercodegen参考文献 前言 尤雨溪在vue官方文档里对于vue这样定义： Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。 vue.js拥有自身定义的一套模版语法。相信大家一直对于vue的模版解析模块充满...
webpack4配置vue环境和一些小坑。
热门推荐
simoon's的博客
06-08 2万+
第一步： npm init npm install webpack vue vue-loader css-loader vue-template-compiler 第二步： 创建文件： src–&amp;amp;amp;amp;amp;amp;amp;gt;app.vue，代码如下： &amp;amp;amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp
webpack4 搭建 vue 项目
03-16
好的，我可以为您提供有关如何使用Webpack 4来构建Vue项目的步骤： 1. 创建项目文件夹并初始化npm（如果您尚未完成）： ``` mkdir your-project-name cd your-project-name npm init -y ``` 2.\u4e3a\u9879\u76ee...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值