Как настроить Vue -router при использовании только времени выполнения Vue - PullRequest
Новая
       2

Как настроить Vue -router при использовании только времени выполнения Vue

1 голос
/ 02 апреля 2020

Я пытаюсь использовать vue -рутер на основе примеров , таких как 

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 = [];

Но все равно не получается.

Ответы [ 2 ]

1 голос
/ 03 апреля 2020

Кажется невозможным использовать среду выполнения, основанную на этих двух MRE (одна с другой, другая без среды выполнения). Если ничего другого, вы можете использовать эти фрагменты, если решите опубликовать проблему на их github или vue форумах, или другой ответ может использовать их в качестве шаблона, чтобы доказать, что я не прав. Это предполагает, что вы не используете vue -cli. С vue -cli вам необходимо включить компилятор в ваши сборки. См. https://cli.vuejs.org/config/#runtimecompiler и https://vuejs.org/v2/guide/installation.html#Runtime -Compiler-vs-Runtime-only

Сбои (предупреждение консоли - vue время выполнения) 

let routes = [
  {
    path: "",
    component: {
      render(h) {
        return h("div", "hello world");
      }
    }
  }
];

let router = new VueRouter({ routes });

new Vue({ router }).$mount("#app");
<script src="https://unpkg.com/vue/dist/vue.runtime.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <router-view></router-view>
</div>

Работает (без предупреждения консоли - полный vue) 

let routes = [
  {
    path: "",
    component: {
      render(h) {
        return h("div", "hello world");
      }
    }
  }
];

let router = new VueRouter({ routes });

new Vue({ router }).$mount("#app");
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <router-view></router-view>
</div>
0 голосов
/ 04 апреля 2020

Хорошо, я потратил полдня на это, и, наконец, все заработало: vue -router + webpack + только для времени выполнения vue.

Это руководство было самый полезный Что я узнал:

Если вы используете vue -cli, версия vue находится в webpack.base.conf. js

  • vue .esm . js будет включать компилятор
  • vue. время выполнения .esm. js будет НЕ включать компилятор

Если вы хотите использовать среду выполнения, вы должны изменить main.js. НЕ используйте это 

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

и вместо этого DO используйте это 

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

Вы можете использовать $mount или el: со временем выполнения. Оба работают, но $mount дает вам большую гибкость . И, конечно же, 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. Удачи!

...