![Vue]( "Vue")
本文介绍了Vue 警告:模板编译器不可用的 Vue 仅运行时构建的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在 App.vue 中测试由 Vue-Cli 环境制作的v-runtime-template"组件.
还有一些问题...
Imgur1
似乎 v-runtime-template 组件无法呈现我的 html 语法 :,(
但是，看看这个例子，这个例子完美呈现我的 html 语法
<button @click="func()">asdf</button> 不像我的 App.vue.
我只重写了App.vue并完美安装了v-runtime-template，其他文件都是vue create时的初始语句工作.
- 所以我想知道
v-runtime-template 在 vue-cli 环境下是不是不能工作. - 首先，我也想知道是什么原因.
谢谢
App.vue
这是我在 vue-cli 中使用 vue create 创建的文件
<div id="应用程序"><v-runtime-template :template="template"/>
</模板><脚本>从v-runtime-template"导入 VRuntimeTemplate；从'vue'导入Vue；导出默认{成分:{运行时模板},数据:() =>({模板:`<button @click="func()">asdf</button>`}),名称:'应用'，方法:{功能(){警报('你好');}}}<风格>#应用程序 {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing:抗锯齿；-moz-osx-font-smoothing:灰度；文本对齐:居中；颜色:#2c3e50；边距顶部:60px；}</风格>
main.js
从'vue'导入Vue从'./App.vue'导入应用程序Vue.config.productionTip = false新的 Vue({渲染:h =>h(应用程序),}).$mount('#app')
我想要的是 <button @click="func()">asdf</button> 或任何其他标签使用 v-runtime-template !
请分享您的建议！:)
解决方案
@skirtle 回答正确！谢谢:)
babel.config.js
module.exports = {预设:['@vue/app'],配置Webpack:{解决: {别名:{vue$: "vue/dist/vue.common",},},},//视图}
I'm testing 'v-runtime-template' component in App.vue which made by Vue-Cli enviornment.
And there is some problems...
Imgur1
It seems that v-runtime-template component couldn't render my html syntax :,(
But, Look at this example, this example rendered perfectly my html syntax
<button @click="func()">asdf</button> unlike my App.vue.
I only rewrote App.vue and installed v-runtime-template perfectly, and the other files are same initial statement when vue create worked.
- So I wonder if
v-runtime-template can't work in vue-cli enviorment. - First of all, I wonder what is the cause too.
Thank you
App.vue
This is the file which i made using
vue create in
vue-cli
<template>
<div id="app">
<v-runtime-template :template="template"/>
</div>
</template>
<script>
import VRuntimeTemplate from "v-runtime-template";
import Vue from 'vue';
export default {
components:{
VRuntimeTemplate
},
data: () => ({
template: `
<button @click="func()">asdf</button>
`
}),
name: 'app',
methods:{
func(){
alert('hi');
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
What I want is that <button @click="func()">asdf</button> or any other tags work perfectly using v-runtime-template !
plz share your tips! :)
解决方案
@skirtle Answer correctly ! thank you :)
babel.config.js
module.exports = {
presets: [
'@vue/app'
],
configureWebpack: {
resolve: {
alias: {
vue$: "vue/dist/vue.common",
},
},
},
// vue
}
这篇关于Vue 警告:模板编译器不可用的 Vue 仅运行时构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！