webpack4 + vue2 编译.vue文件失败错误

提示如下的错误图片说明

这是我有的所有的依赖

图片说明

webpack的配置文件

图片说明

这个只是按照网上一个demo写的,不知道为什么编译vue的时候报错,PS:菜鸟一只,头回使用webpack 和 vue

我是想把vue文件编译到某某js中,所以和服务器上的dev不太一样 不知道为什么就是不好用

3个回答

你少装了个插件,下面已经提示了,从贴出来的css和error信息来看,应该是少了vue-loader或者vue-style-loader,安装下试试图片说明

qq_40050220
江山流水 多谢提醒 是版本问题
一年多之前 回复
qq_40050220
江山流水 嗯 跟这个没关系 是vue-loader版本过高不兼容,调低一个点就行了
一年多之前 回复
qq_40050220
江山流水 test: /\.vue$/, loader: 'vue-loader!vue-style-loader!vue-html-loader', 配置文件写了一堆这些东西 没再报错了 但是还没成功 继续尝试
一年多之前 回复

还有,你webpack用2.x吧,4.x好像有很多兼容问题

qq_40050220
江山流水 额 我只是觉得4.X比较新 所以一直在用,另外我已经装了 vue-loader 和 vue-style-loader
一年多之前 回复

此问题已解决,请使用 vue-loader v1.4.x

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
webpack4 + vue2 编译.vue文件失败错误
# 提示如下的错误![图片说明](https://img-ask.csdn.net/upload/201805/04/1525424808_11411.png)rnrnrn这是我有的所有的依赖rnrnrn![图片说明](https://img-ask.csdn.net/upload/201805/04/1525424879_290303.png)rnrnrnwebpack的配置文件rnrn![图片说明](https://img-ask.csdn.net/upload/201805/04/1525424904_596031.png)rnrnrnrnrn这个只是按照网上一个demo写的,不知道为什么编译vue的时候报错,PS:菜鸟一只,头回使用webpack 和 vuernrnrnrn我是想把vue文件编译到某某js中,所以和服务器上的dev不太一样 不知道为什么就是不好用
webpack4整合vue
webpack4.3整合vue代码,运算环境 windows +node v10.15.3 +npm v6.4.1
webpack4与vue整合记录
首先可以从https://github.com/fanqingyun/d3Util.git拉取dev分支下webpack的demo(记得切换到dev分支),具体可以参照上一篇,然后以下就可以整合vue了 安装依赖: 1, 安装vue npm i vue 2, 安装vue相关 npm install --save-dev vue-loader vue-style-loader vue-...
vue分页组件vue2
vue 分页组件 vue2
webpack4 搭建 Vue 开发环境笔记
一、node 知识 __dirname: 获取当前文件所在路径,等同于 path.dirname(__filename) console.log(__dirname); // Prints: /Users/mjr console.log(path.dirname(__filename)); // Prints: /Users/mjr path.resolve([…paths]): 把一个路径或路...
vue全套课程webpack4教程
该课程包含三门课程,分别是vue入门教程,vue实战课程和webpack4教程。
基于Webpack4搭建Vue开发环境
一篇比较好的基于Webpack4搭建Vue开发环境的文章分享给大家 https://www.colabug.com/4917669.html?tdsourcetag=s_pcqq_aiomsg
基于 Webpack4 搭建 Vue 开发环境
之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 —— 基于Webpack搭建React开发环境,也是比较简单的,没有涉及到 CSS 抽取,第三方库打包等功能,这篇文章相对而言比较深入。但由于作者水平有限,难免存在谬误之处,欢迎大家指正。 还有没入门的童鞋可以参考我之前的文章: 浅入浅出webpack 基于Webpack搭建React开发环境 一、初始化项目 在命令行中...
vue项目升级webpack4指南
所用vue-cli版本为2.9.3, 非最新的3.0+版本, 包管理工具为yarn现在vue cli 3.x版本已经稳定, 推荐使用 @vue/cli 3.x版本 初始化项目 vue init webpack my-project cd my-project yarn install 脚手架项目webpack版本为3.6.0 升级web...
最佳实践 - Vue - 2 :webpack4 总括
一、初始化npm ①:选择一个项目目录,打开命令窗口,键入 npm init -y     =>使用默认配置,并会在该目录下创建配置文件 package.json 二、安装webpack4.0 ①:键入 npm install webpack webpack-cli --save-dev  &a
webpack4 系列教程(二): 编译 ES6
今天介绍webpack怎么编译ES6的各种函数和语法。敲黑板:这是webpack4版本哦, 有一些不同于webpack3的地方。 >>> 本节课源码 >>> 所有课程源码 1. 了解babel 说起编译es6,就必须提一下babel和相关的技术生态: babel-loader: 负责 es6 语...
webpack4——文件的打包
安装 npm -d install html-webpack-plugin 引入 const htmlPlugin = require('html-webpack-plugin'); plugins: [ new htmlPlugin({ minify: { removeAttributeQuotes: true, //去掉html属性引号 },...
webpack4 二、文件引用
文件引用 1.css文件导入 1.1使用介绍 webpack不支持直接导入样式文件,需要使用相应的loader才能导入和使用 css-loader //是webpack可以处理css文件 style-loader //将css-loader处理完的文件变成style标签插入header里面 安装 npm install --save-dev style-loader css-loader ...
vue import ~文件 编译不通过
rn我在一个scss文件里引入这个cssrn@import '~normalize.css/normalize.css'; // normalize.css 样式格式化rnrn以前的工程是编译成功的,我又重新弄了一个项目(重新按照vue的模板安装的依赖),结果死活不认识,提示rnrnModule build failed: Error: Failed to find '~normalize.css/normalize.css',rnnormalize.css这个模块我是已经安装了的,去掉~就好使了,我想知道的是为啥以前好使呢?这个~主要是用什么解析让它能编译的呢(需要安装什么依赖)?现在我不想去掉这个符号,想搞明白为啥,请大神指教
Vue2 文件目录结构详解
-
webpack4
vue是火的前端开发框架,本课程从基础的es6语法过渡到vue的课程中,在vue课程涵盖vue及目前使用广的前端打包工具webpack,vue的脚手架工具vue-cli,官方插件vue-router、vuex、vue-resource,项目中常用的第三方插件:axios、vue-lazyload、vue-awesome-swiper、json-server、mocks.js.和2个项目案例.
一丢丢学习之webpack4 + Vue单文件组件的应用
一丢丢学习之webpack4 + Vue单文件组件的应用 之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star。 就是很简单,由于是第一次用Vue写小demo,所以代码写的有点蠢很裸的那种,不像大神那样一看代码组...
webpack4配置vue环境和一些小坑。
第一步: npm init npm install webpack vue vue-loader css-loader vue-template-compiler 第二步: 创建文件: src–>app.vue,代码如下: <template> &amp
webpack4搭建vue项目(完整版本)
最近研究了下webpack4,顺便用webpack 4搭建了一个vue项目,搭建过程如下: 1.安装node,然后使用npm init (初始化项目); npm init 2.npm i webpack vue vue-loader,同级创建src(建app.vue及index.js文件)、config(建webpack.config.base.js、webpack.config.dev.js、...
vue单页面项目实战webpack4教程
该套餐包含两门视频教程,分别是vue项目实战课程和webpack4课程
nodejs教程-手把手教你用webpack4整合vue
目前为学习nodejs记录帖,因为自己是做后端的,感觉一天到晚写接口也厌烦了,刚好听到nodejs很强大,所以想着自己先搭建一下webpack,因为我用的webpack4版本,其他版本会有些许差异, 需要源码请戳 nodejs-webpack进阶教程-逐步加入vue、HtmlWebpackPlugin、css压缩、热部署 废话不多说,我们直接开始 1、创建一个webpack_vue的目录 ...
基于webpack4搭建Vue服务端渲染(SSR)
前言 了解服务端渲染是偶然间一位朋友问了我Nuxt.js的问题,孤陋寡闻的我竟然不知道服务端渲染是什么!赶紧利用空余时间充电,了解大概后觉得正好能解决我当前正遇到的问题,随着我项目的功能逐步扩展首屏加载白屏越来越明显,正好利用这个机会看能不能做些优化,当然服务端渲染能带来的好处不仅限于此,如果当你看到这篇博客的时候你还不了解服务端渲染,那我建议你可以先看看搜索引擎优化_百度百科,当然随着现...
WEBPACK4打包总结(包含VUE打包)
webpack4     什么是webpack        webpack是一个用于打包js文件的软件。 特点        对于打包后的js文件其有如下特点: 指令兼容 减少文件数量 下载webpack               npm init -y               npm i webpack webpack-cli -D -g 指令说明:https://ww...
9102年webpack4搭建vue项目
前言首先祝大家元宵节快乐,最近已经好久没有写过文章了,刚好趁着这几天刚刚上班,领导还没有来,偷偷的写一篇关于webpack搭建vue的博客。因为公司使用vue比较多,构建vue项目使用vue-cli显得有点臃肿,感觉还是自己配置比较好些,所以就有了这篇教程。由于水平有限,欢迎大家指正,一起进步。新建项目1.新建名为webpackconfig文件夹2.使用命令npm init -y复制代码在webp...
webpack4——配置入口出口文件
新建webpack.config.js webpack.config.js const path = require('path'); module.exports = { entry:{ entry:'./src/entry.js', }, output:{ path:path.resolve(__dirname,'dist'), filename:'[name].js' }...
webpack4——scss文件打包分离
安装 npm -d install less lass-loader node-sass 配置 { test: /\.scss$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ] } ...
webpack4——less文件打包分离
安装 npm -d install less less-loader 配置 { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader' ] } 可以看到把les...
Vue2从0到1(一):用webpack打包vue
webpack-vue 0.项目初始化 cd 'to/your/path' npm init 1.安装 webpack 分为全局安装和项目内安装 npm install webpack -g npm install webpack --save-dev 2.配置webpack.config.js文件 const ...
Vue - Tomcat 与 Vue2 搭建简单测试环境
Shell 脚本脚本说明: 进入 vue2 工程目录 进行 工程 build 复制 build 结果到 tomcat 下 测试路径 webpack-tomcat.sh#! /bin/bash echo '------ build start ------'cd ~/sahc/sources/Etag_App/insurance_web/ npm run build cp -r dist/. ~/ja
Vue2 全局-Vue.set更新vue数据
代码: {{ name }} --- {{ price }} --- {{ count }} 减少 function reduceOne() { Vue.set(cartData, 'count', cartData.count-1); } var cartData={ name:"T-shirt
VUE2经典学习书籍-vue小书
VUE2经典学习书籍,VUE2经典学习书籍,VUE2经典学习书籍
vue2实践揭秘((vue的入门的最佳捷径))
本书以 Vue2 的理论为中心,以实战示例为基础,通过示例应用展开覆盖 Vue 的各个 理论知识点。本书从实践应用出发,对 Vue 官方未曾进行详尽说明甚至不曾提及的实用内 容进行揭秘,试图使此书能成为你在 Vue 前端工程化开发实战中的参考手册。本书主要从 多个示例由浅入深地讲述 Vue 的使用知识,除此之外,还重点介绍了 Vue 工程化开发中必 备的源码库、第三方开发工具以及如何对 Vue 的各种模块进行全方位的测试。
vue 学习笔记二之vue2与vue1的选择
前文提到都已经Vue2.x了,Vue1还没学呢。那么如何开始呢,是先Vue1,再Vue2,还是直接Vue2呢,得对比一下。 查阅了一些资料,看到有人提到正在把项目逐渐迁移到vue2.0,建议直接从vue2.0+开始。那么这样看来,从时间成本的角度看,加上vue1到2的进阶是比较平滑的,api相似,可以考虑直接从vue2.0+着手,至于现有的vue1.x的项目,只需要关注他们之间的差异就好了。
Vue2实践揭秘读书笔记(1)——Vue概要
Vue.js与Angular2和React相比,Vue.js一开始就为我们铺平入门的道路,脚手架vue-cli。 因为它的存在,省去了手工配置开发环境、运行环境和测试环境的步骤,开发者可以直接步入Vue.js开发的殿堂。 在开始之前,先安装npm,然后输入vue-cli安装到全局环境 npm i vue-cli -g 然后,开始建立工程 vue init webpack-simple vue-...
Vue学习第一天 Vue2简单入门
-
Vue 编译出现 Missing semicolon 错误的处理方法
在测试 vue-cli 脚手架工具,选择 eslint 模式后,对代码的规范有了很严格的要求,如果不符合eslint 规范,例如,代码中少了分号,则执行命令 npm run dev 就会出现错误。 我们可以通过返回的错误来看,原来是src/App.vue 文件第十行少了分号,导致了报错。 ✘ http://eslint.org/do...
webpack4打包多个js文件
默认文件目录: 1.多个js文件不合并打包(分别打包) 配置文件./conf/webpack.dev.js const path = require("path"); module.exports = { mode: "development", //打包为开发模式 // 入口配置的对象中,属性为输出的js文件名,属性值为入口文件 entry: { m...
隐式类型转换编译失败, 帮我看看是什么错误
我自己写了一小段代码:rn[code=c]rn#includernusing namespace std;rntemplaternstruct Mrn /*explicit*/ M(const T*)rn;rntemplaternM f(const M&)return M();rnrnint main()rnrn M s1=f("Hello");//OKrn M s2=f("Hello");//errorrn M s3=f(decay("Hello"));//errorrn return 0;rnrn[/code]rn在main函数里面,只有s1这个构造是OK的(当然如果M里面加上了explicit关键字的话,也不行), 通过隐式类型转换构造成功。rn但是后面两个s2/s3,当我使用模板函数f而没有显示指定模板实例化类型的时候,两个都编译不过,我尝试了decay也不行。rnrn这是为什么呢,背后的机理是?rn谢谢
模拟器的错误缓存,会造成编译失败
rm -rf ~/Library/Developer/Xcode/DerivedData/
编译失败
#include using namespace std; struct PersonInfo { int index; char name[30]; short age; }; void ShowStuctMessage(struct PersonInfo Mypinfo) { cout cout cout } void main() PersonInfo pIn
相关热词 c# login 居中 c# 考试软件 c# 自然语言分析 c# 分段读取文件 c# 泛型反射 c#打断点 c# 时间转多少秒 c# 线程函数加参数 c# modbus 读取 c#查询集合表