关于vue编译版本引入的问题的解决
下班过目遇到一个错误
[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.
根据错误提示说明，和搜索之后得出结论：是项目引入的vue编译版本不对
解决方案1
build/webpack.base.conf.js 并设置vue的alias别名，如下：
resolve: {
alias: {
vue: 'vue/dist/vue.esm.js'
}
}
解决方案2
打开src/main.js修改Vue对象初始化。
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
改为
new Vue({
el: '#app',
router,
render: h => h(App)
})
原因是，使用 template属性，需要引入带编译器的完整版的vue.esm.js
而如果在.vue文件里面使用
<template>
<div></div>
</template>
<script>
export default {
name:'name1',
data() {
return {};
}
};
</script>
这种形式，然后使用import引入，则不需要完整版的vue.esm.js，因为使用vue-loader时 *.vue文件会自动预编译成js。
其实vuejs官网中已有明确说明
其他相关文章：
理顺8个版本vue的区别（https://www.jb51.net/article/147538.htm）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue.js编译时给生成的文件增加版本号
vue.js在生成相关js和css文件的时候,名称是通过HASH的方式进行生成的,但是每次生成的文件基本都是一样的,那么浏览器就会缓存这些文件,为了在更新的时候能够保证js和css文件能够更新,那么我们需要针对webpack的配置文件进行修改: 打开webpack.prod.conf.js文件进行如下操作 1.增加版本变量(版本号暂时用时间代替) var Version = new Date().getTime(); 2.修改要生成的js和css文件的配置项,把刚刚声明的版本拼接进要生成的文件名
-
关于vue编译版本引入的问题的解决
下班过目遇到一个错误 [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. 根据错误提示说明,和搜索之后得出结论:是项目引入的vue编译版本不对 解决方案1 buil
-
详解从新建vue项目到引入组件Element的方法
本文介绍了从新建vue项目到引入组件Element以及Error when rendering component报错解决,分享给大家 一.新建项目 1.打开cmd,运行:vue init webpack Vue-Demo 2.运行:cd Vue-Demo进入这一级 3.运行:npm install 4.运行:npm run dev 如果浏览器打开之后,没有加载出页面,说明本地的8080 端口被占用,需要修改一下配置文件 config/index.js 解释:1.将 build 的路径前缀修改为
-
VUE项目中引入JS文件的方法总结
目录 1.在index.html页面使用script标签引入 2.在main.js中使用window.moduleName 使用 3.手动添加export 4. 使用import方式,把需要的js库中的方法挂载到全局 补充:Vue3如何引用全局JS文件 总结 在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,可以有如下方法实现: 1.在index.html页面使用script标签引入 当然也可以使用cdn的地址.这样引入后的内容是全局的,可以在所有地方使用. <!D
-
关于Vue 3.0引入百度地图不兼容的解决办法
目录 关于Vue 3.0引入百度地图 不兼容的解决办法 1. 问题:Vue 3.0引入百度地图 不兼容 2. 解决办法 3.vue页面 引入并执行 4.完成, 地图如下 关于Vue 3.0引入百度地图 不兼容的解决办法 1. 问题:Vue 3.0引入百度地图 不兼容 百度地图开发平台文档 封装的vue版本暂时还没有 到 vue 3.0 如果 用npm 引入并使用的话,会出现报错 at eval (bindEvent.js?4fab:8) at Array.forEach (<anonymous>
-
Vue中动态引入图片要是require的原因解析
目录 1.什么是静态资源 2. 为什么动态添加的src会被当做的静态的资源? 3. 没有进行编译,是指的是什么没有被编译? 4. 加上require为什么能正确的引入资源,是因为加上require就能编译了? 4.1 require是什么: 是一个node方法,用于引入模块,JSON或本地文件 4.2 调用require方法引入一张图片之后发生了什么: 5. 问题3中,静态的引入一张图片,没有使用require,为什么返回的依然是编译过后的文件地址? 6. 按照问题6中所说,那么动态添加src的
-
vue按需引入element Transfer 穿梭框
Transfer 穿梭框 按需引入Transfer 编辑main.js import { ... Transfer } from 'element-ui'; const components = [ ... Transfer ]; components.map(component => { Vue.component(component.name, component); }); 安装transform-vue-jsx 插件 编辑 .babelrc文件 { "presets":
-
java获取版本号及字节码编译版本方法示例
前言 之所以会有这篇文章,是因为公司的开发环境比较老,寻找一些jar包的时候总是会纠结对应的编译版本,感觉很麻烦,所以写了一个工具类用于读取class或jar文件的编译版本,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 示例代码 package com.jinggujin.util; import java.io.DataInputStream; import java.io.File; import java.io.FileInputStream; import java.
-
解决Vue编译时写在style中的路径问题
写在vue文件里面的style样式,在添加例如背景图片的时候,如果用的是相对路径,那么build出来的css文件的路径将会出错,导致找不到图片. 通过查找资料,在https://segmentfault.com/q/1010000008438061有人的回答解决了问题. 要修改主要有两个,一个就是config/index.js文件,将assetsPublicPath的路径改为'./',这是发布路径,如果构建后的产品文件有用于发布CDN或者放到其他域名的服务器,可以在这里进行设置设置之后构建的产品
-
vue编译打包本地查看index文件的方法
/build/config/index.js assetsPublicPath: './'(编译出来可以本地查看,'/'没有点的就直接发布到线上) 以上这篇vue编译打包本地查看index文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa