如何在使用仅运行时Vue时配置Vue-router

xriantvc 于 2022-11-30 发布在 Vue.js

关注(0)|答案(4)|浏览(171)

我尝试使用基于示例的vue-router，例如

let routes = [
    { path: '/',  component: MainComponent },
];

let router = new VueRouter({routes});

new Vue({  router  }).$mount('#app');

但我总是得到这个错误：

vue.runtime.esm.js:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available.

我可以用render函数来修复这个问题吗？我试过了，

let routes = [];

但还是失败了。

vue.js

来源：https://stackoverflow.com/questions/61000554/how-to-configure-vue-router-when-using-runtime-only-vue

4条答案

按热度按时间

sgtfey8w1#

好吧，我花了半天的时间，终于让它工作了：vue-路由器+ webpack +仅运行时vue。
This tutorial是最有帮助的。我学到了：
如果使用vue-cli，则vue版本位于webpack.base.conf.js

vue.esm.js将包含编译器
vue.runtime.esm.js将不包括编译器

如果你想使用运行时，你必须改变你的main.js。

new Vue({
    el: '#app',
    router,
    template: '<App/>',      //  <== This is bad
    components: { App }
});

而不是用这个

Vue.use(VueRouter);          // <== very important
new Vue({
    router,
    render(createElement) {
        return createElement(App);
    }
}).$mount('#app');

你可以使用$mount或者el:来运行，两者都可以，但是$mount提供了more flexibility。当然，router是用通常的方法创建的

let routes = [
    { path: '/', component: MainComponent },    
];
let router = new VueRouter({ routes });

如果您仍然看到错误

[Vue warn]: You are using the runtime-only build of Vue

在控制台中，然后再次确保您 * 永远都不要 * 在您的代码中使用任何带有字符串的模板。即使在您的 *.vue文件中，如果您试图

const Foo = { template: '<div>foo</div>' };

它将失败。相反，您必须使用<template>标记，否则您必须使用createElement。祝您好运！

赞(0）回复(0）举报 2022-11-30

tvmytwxo2#

接受的解决方案是正确的，因为你不能使用字符串模板和仅运行时Vue，你必须实现render函数。但是，如果你想在顶层呈现组件，而不是使用路由器视图，你可以获得匹配的组件，并手动呈现它：

const routes = [
  { path: '/about', component: About },
  { path: '/index', component: App },
  { path: "*", component: App }
]

new Vue({
  router,
  render: h => {
    return h(router.getMatchedComponents()[0])
  },
}).$mount('#app')

赞(0）回复(0）举报 2022-11-30

von4xj4u3#

It appears to be impossible to use the runtime, based on these two MREs (one with, one without runtime). If nothing else, you can use these snippets if you choose to post an issue on their github or the vue forums, or another answer can use them as a template to prove me incorrect. This assumes you're not using vue-cli. With vue-cli you need to opt-in to including the compiler in your builds. See https://cli.vuejs.org/config/#runtimecompiler and https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

失败（控制台警告-vue运行时）

第一个

工作（无控制台警告-完整版本）

第一次

赞(0）回复(0）举报 2022-11-30

gupuwyp24#

对于Vue 3（这里使用TypeScript），技巧是使用h组件渲染函数作为设置函数的结果，作为顶级组件，而不是默认的createApp({})，后者似乎被解释为模板。
所以我有：

const app = createApp({
        setup() {
            const component = computed((): Component => {
                const res = router.currentRoute.value.matched
                if (res.length > 0 && res[0].components)
                    return res[0].components.default
                else
                    return Loading
            })
            return () => h(component.value)
        }
    })
    ...

vue-router的Router在属性currentRoute.value.matched[0].components.default中公开了一个准备呈现的组件。请确保检查匹配项以及要加载的组件（这适用于惰性组件以及使用() => import('path/to/Component.vue')导入的组件）。
显然，路由器已集成到应用程序中，并且应用程序以这种方式安装，路由器使用createRouter创建：

...
    const router = createRouter({
        history: createWebHistory(),
        routes: [
            ...
        ]
    })
    app.use(router)
    app.mount('#app')

在索引中，请注意没有使用<router-view/>。这可能是唯一使用运行时编译器的东西，考虑一下作为文档中推荐选项的空间浪费！在根组件中使其静态化的一点点额外努力绝对是值得的。索引如下所示：

<!DOCTYPE html>
<html class="dark" data-theme="dark">
    <head>
        <meta charset="utf-8"/>
        <title>Title</title>
        <script type="module" src="/src/main.ts"></script>
    </head>
    <body>
        <div id="app">
        </div>
    </body>
</html>

用Vite测试，允许有vue: 'vue/dist/vue.runtime.esm-bundler.js'。非常紧凑！

赞(0）回复(0）举报 2022-11-30

我来回答

如何在使用仅运行时Vue时配置Vue-router

4条答案

失败（控制台警告-vue运行时）

工作（无控制台警告-完整版本）

相关问题

热门标签

最新问答