[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. php调用C代码的方法详解
  2. H5 history.pushState 在微信内修改url后点击用safari打开/复制链接是修改之前的页面...
  3. 16.4 配置Tomcat监听80端口 16.5/16.6/16.7 配置Tomcat虚拟主机16.8 Tomcat日志
  4. 能在任意一种框架中复用的组件,太牛了!
  5. 689 Maximum Sum of 3 Non-Overlapping Subarrays
  6. LeetCode 306. 累加数(暴力回溯)
  7. 2022年中国美妆护肤品行业投资研究报告
  8. c ++向量库_C ++中的2D向量–实用指南2D向量
  9. 信息安全技术网络安全等级保护定级指南_报业网络安全等级保护定级参考指南V2.0发布...
  10. 铁路售票系统_铁路这些工种你知道吗?快来一起康康吧
  11. 暴力破解wifi密码尝试
  12. 前端机器人流程设计的最佳实践:输入输出文件结构和逻辑框架
  13. 苹果系统连接服务器打印机,Mac系统怎么连接打印机
  14. 虚拟机运行python_虚的解释|虚的意思|汉典“虚”字的基本解释
  15. 通过PD4ML把html转pdf(包含显示页眉页脚,插入图片,显示页数)
  16. 国内最火的内存数据库,110000 QPS 没有之一!
  17. 西北工业大学遭到境外网络攻击,调查报告二发布
  18. 将java项目部署到腾讯云服务器
  19. 门禁服务器故障怎样修复,门禁常见故障及解决方法
  20. Idea控制台 CMD Tomcat乱码

热门文章

  1. android自定义view流程,Android 自定义View--从源码理解View的绘制流程
  2. python corrupt extra field_求救,作业完全不会写啊
  3. C++之get、getline探究
  4. 累加求和a+aa+aaa+aa…a_过半深圳券商评级跃升4家维持在AA级
  5. java如何用反射把具体方法抽象_如何在Java 中使用泛型或反射机制对DAO进行抽象...
  6. matlab 安装(2018a图解版)
  7. linux内核disabled,Linux内核关闭IPv6协议的方式
  8. 插件代码_我们开源了一款 SonarQube iOS 代码扫描插件
  9. python图例重复显示_python – 具有两个标记的多行的自定义图例,用于相同的文本...
  10. 计算机系统库的管理及应用,计算机软件及应用嵌入式软件基础数据库管理系统.pptx...