vue.js - 使用仅限运行时的 Vue 时如何配置 Vue-router

Question

我正在尝试使用基于 examples 的 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.

我可以使用渲染功能解决这个问题吗？我试过，

let routes = [];

但还是失败了。

Answer 1

好的，我花了半天时间，终于让它工作起来了:vue-router + webpack + runtime-only vue。

This tutorial是最有帮助的。我学到的是:

如果使用vue-cli，vue版本在webpack.base.conf.js

vue.esm.js 将包含编译器

View 。 运行时间 .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 .祝你好运!