vue3.0 可否支持运行时编译?
What problem does this feature solve?
在使用render函数或者functional组件时,只能传入dom原生的元素,如果是UI组件库的元素类型(全局注册的组件)就无法渲染了
What does the proposed API look like?
null
我使用的vite,安装vue@3.0.0,是否包含了运行时编译器呢?
例如说我有个SFC
<template>
{{ text }}
<a-tag :color="color">{{ tag }}</a-tag>
</template>
<script>
export default {
props: {
text: String,
tag: String,
color: String,
},
};
</script>
这个渲染没问题 但如果我把这个组件的定义放到引用该组件的组件中
export default {
components: {
LoadingOutlined,
InfoCircleOutlined,
CheckTag: {
props: {
text: String,
tag: String,
color: String,
},
template: `{{ text }}
<a-tag :color="color">{{ tag }}</a-tag>`,
},
},
控制台报: [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
createServer({
alias: {
vue: "vue/dist/vue.esm-bundler.js"
},
cssPreprocessOptions: {
less: {
javascriptEnabled: true,
},
},
configureServer: [myPlugin]
}).listen(3000)
我配置了,但是没有效果
https://codepen.io/unbyte/pen/YzWjVyB 无法复现,所以请提供最小复现项目
vue是支持运行时编译的,但是你可能用了插件,导致报错,具体解决方案,可参考https://blog.csdn.net/qq_41499782/article/details/112505665,亲测有效
我想你也是被 vue-router 欺骗的吧。
// 1. Define route components.
// These can be imported from other files
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = VueRouter.createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
})
// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)
app.mount('#app')
这样貌似真的出哪里个问题,因为是js代码