Subscribe on changes!

vue3.0 可否支持运行时编译?

avatar
Oct 5th 2020

What problem does this feature solve?

在使用render函数或者functional组件时,只能传入dom原生的元素,如果是UI组件库的元素类型(全局注册的组件)就无法渲染了

What does the proposed API look like?

null

avatar
Oct 5th 2020

看不懂你的问题,但是 Vue 一直都支持运行时编译,前提是用户使用了带运行时编译器的 Vue 版本。

avatar
Oct 5th 2020

我使用的vite,安装vue@3.0.0,是否包含了运行时编译器呢?

avatar
Oct 5th 2020

例如说我有个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".

avatar
Oct 5th 2020

控制台的错误提示你都贴了……不看一下吗

avatar
Oct 6th 2020
createServer({
    alias: {
        vue: "vue/dist/vue.esm-bundler.js"
    },
    cssPreprocessOptions: {
        less: {
            javascriptEnabled: true,
        },
    },
    configureServer: [myPlugin]
}).listen(3000)

我配置了,但是没有效果

avatar
Oct 11th 2020

@langhuihui 有没有最小复现项目

avatar
Oct 12th 2020

@unbyte 上面的代码就是最小复现代码,很容易构造出来

avatar
Nov 5th 2020

@langhuihui 请问解决了吗 我也遇到了同样问题

avatar
Nov 5th 2020

https://codepen.io/unbyte/pen/YzWjVyB 无法复现,所以请提供最小复现项目

avatar
Apr 21st 2021

vue是支持运行时编译的,但是你可能用了插件,导致报错,具体解决方案,可参考https://blog.csdn.net/qq_41499782/article/details/112505665,亲测有效

avatar
Jul 21st 2021

我想你也是被 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代码