webpack打包vue2.0项目时必现问题。
来源:互联网 发布:淘宝客服主管提成方案 编辑:程序博客网 时间:2024/03/28 18:38
[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 )
这个问题是怎么造成的呢,找了很久找不到处理方法,上网查了也没找到一个好的处理方案。后来去看官方文档,找到了类似的答案。
这是什么意思呢?
运行时构建不包含模板编译器,因此不支持 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" }}
不知道有没有朋友遇到过这样的问题,如果遇到了而你正好不知道怎么解决,我想这篇文章会帮到你。
阅读全文
0 0
- webpack打包vue2.0项目时必现问题。
- Ⅲ vue2.0 webpack打包
- vue2+webpack构建项目
- 手动webpack搭建vue2项目
- vue2.0新手发车(一):使用webpack构建项目
- Vue2.0+Webpack项目环境构建到发布
- webpack打包react项目
- webpack打包项目
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十二)打包项目图片等资源的处理
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录
- Vue2+VueRouter2+webpack 构建项目实战
- Vue2+VueRouter2+webpack 构建项目总结
- 用webpack一步步构建Vue2项目 笔记
- 如何创建Vue2.x+webpack项目
- cordova打包vue2(webpack)android、ios app
- webpack打包vue项目demo
- vue2.0+vue-router2.0+axios+webpack开发webapp项目(一)
- 【SpringMVC学习09】SpringMVC中的拦截器
- Touch_Java 8:内部类和异常类
- 喜讯:中国开源软件推进联盟PostgreSQL分会正式成立 瀚高软件董事长苗健先生接受分会秘书长任命
- 实时进行GZIP压缩优化Asp.Net页面的CompressionModule对Asp.Net Ajax及搜索引擎的兼容性测试!
- UDP广播遇到的坑
- webpack打包vue2.0项目时必现问题。
- 数据提交及弹出框样式
- Touch_Java 10:输入、输出流
- leetcode 26|27|80. Remove Duplicates from Sorted Array 1|2 && 27.Remove Element
- 坦克大战,地图编辑
- 抽象数据类型-线性结构-先进先出:队列
- SpringCloud Zuul修改请求参数信息
- Django 自定义过滤器 笔记
- 十-1 检查和调试JavaScript 如何设置断点