[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

这个问题是怎么造成的呢,找了很久找不到处理方法,上网查了也没找到一个好的处理方案。后来去看官方文档,找到了类似的答案。

这是什么意思呢?
运行时构建不包含模板编译器,因此不支持 template 选项,只能用 render 选项,但即使使用运行时构建,在单文件组件中也依然可以写模板,因为单文件组件的模板会在构建时预编译为 render 函数。运行时构建比独立构建要轻量30%,只有 17.14 Kb min+gzip大小。
上面一段是官方api中的解释。就是说,如果我们想使用template,我们不能直接在客户端使用npm install之后的vue。此时,再去看查vue模块,添加几行
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
}
再运行,没错ok了。

以下是我的完成的代码
webpack.config.babel.js

/*** Created by lenovo on 2017/5/8.*/import path from 'path';import HtmlWebpackPlugin from 'html-webpack-plugin';const config = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.join(__dirname, 'dist')},module: {loaders:[{test: /\.js$/,loader: 'babel'},{test: /\.vue$/,loader: 'vue-loader'}]},plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: './index.html',title: 'hello App'})],resolve: {alias: {'vue': 'vue/dist/vue.js'}}}export default config;复制代码

package.json

{"name": "demo","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"dependencies": {"vue": "^2.3.2"},"devDependencies": {"babel-core": "^6.3.26","babel-loader": "^6.2.0","babel-preset-es2015": "^6.24.1","html-webpack-plugin": "^2.28.0","webpack": "^1.12.9","vue-loader": "^12.0.3","vue-template-compiler":"^2.3.2"}}复制代码

不知道有没有朋友遇到过这样的问题,如果遇到了而你正好不知道怎么解决,我想这篇文章会帮到你。

webpack打包vue2.0项目时必现问题相关推荐

  1. vue设置html自动跳转路由器,vue2.0项目实现路由跳转的方法详解

    一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入v ...

  2. 创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目

    创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目 使用vue-cli2.0版本创建vue项目 创建前的准备 开始创建 创建过程 项目正常创建 使用v ...

  3. 部分uc浏览器打开vue2.0项目空白页问题

    · 最近在工作中需要适配各个浏览器运行项目新页面的情况,遇到了在部分机型的uc浏览器中空白页的问题.尝试了很多种情况,还是没有解决问题. 查看控制台报错 查看在浏览器控制台报错没有 尤其是要在ie和e ...

  4. Vue2.0项目安装Mint-UI - cmd篇

    Vue2.0项目如何安装引入Mint-UI? 这里讲一下如何通过cmd指令安装mint-ui到vue2.0项目. 步骤说明: 和以前一样,先cd到项目根目录 然后cmd:npm i mint-ui - ...

  5. 创建基于webpack打包的vue项目

    创建基于webpack打包的vue项目 结合win7.element-ui.vue(vue-router.vue-cli).webpack等技术,完成了项目的基础工作.难则不会,会则不难:贵在经验总结 ...

  6. webpack+Vue2.0项目基础工程文件配置

    随着Vue的流行,很多公司开始技术栈指向Vue,开始的时候用gulp+vue1.0做项目,一直到现在,webpack趋势也上来了,而且vue官网也是用webpack跟Vue结合去讲解实例,接下来大概说 ...

  7. 使用Webpack打包Typescript ES6项目(转ES5)

    前言 目前,ES6标准逐渐成为主流,然而一些旧的浏览器,对于ES6的支持并不十分完善,这时候就需要将ES6转为ES5,以兼容旧的浏览器. Webpack是一个现代 JavaScript 应用程序的静态 ...

  8. 二、Vue2.0项目结构内容及配置解析

    1.node_modules文件夹:用于执行程序的各种依赖 2.Public文件夹,静态资源,里面的东西,打包会原封不动的打包进去 3.src assets文件夹:公用的静态资源,webpack会打包 ...

  9. vue2.0 项目搭建 和vue 2.0 electron 项目搭建

    1.关于electron vue 项目的搭建 全局或者局部安装项目vue:脚手架指令生成: npm install -g vue-cli vue init simulatedgreg/electron ...

最新文章

  1. 计算机学win7画图,Win7系统自带画图工具如何打开?win7打开画图工具教程
  2. Centos下用lamp搭建日志服务器
  3. app怎么嵌套vue页面_app内嵌vue单页面应用的一些坑
  4. mysql 列名能不能写成col1、col2_Mysql 寒假刷题TIPs
  5. HDU1007 Quoit Design 分治+递归
  6. excel中定义VBA
  7. [蓝桥杯2017决赛]分考场、OpenJudge:分成互质数
  8. HEC-RAS如何修改SA/2D Connection的名称
  9. Cortex-M0(3)---ARM Cortex-M0 异常与中断
  10. webdriver.chrome()禁止加载图片
  11. Jmeter负载和压力测试
  12. 让 ASP.NET AJAX 支持浏览器的 History Navigation - Part 1
  13. 高速信号的预加重(Pre-emphasis)和去加重(De-emphasis)
  14. 微型计算机系统评课,微机课评课稿.doc
  15. LATEX参考文献添加文章doi号并嵌入超链接+IEEE期刊缩写查询
  16. 自动驾驶汽车传感器技术解析—毫米波雷达
  17. 分位数回归模型学习笔记
  18. GUI 应用:socket 网络聊天室
  19. DAY7:尚学堂高琪JAVA(66~69)
  20. spark-streaming 编程(三)连接kafka消费数据

热门文章

  1. C++新特性探究(十二):static_assert(提前判误)
  2. matlab 经济计量工具箱,matlab计量经济学
  3. c语言程序设计第一课作业,C语言程序设计第一课答案.doc
  4. 测试方案_在线式UPS电源测试方案
  5. win7您需要来自计算机管理员的权限,win7需要提供管理员权限才能打开文件怎么解决...
  6. 怎样用计算机算屋面的坡度,屋顶坡度要怎么算,一般是多少?
  7. 解码(五):sws_getContext和sws_scale像素格式和尺寸转换函数详解
  8. linux 发送socket命令,如何从linux中的命令行向socket.io websocket发送消息?
  9. android代码跳过锁屏,Android_android禁止锁屏保持常亮(示例代码),在播放video的时候在mediaplayer m - phpStudy...
  10. 有php注入的源码,php注入3_php