Не удается заставить vue-router работать с webpack

Я безуспешно пытаюсь заставить vue-router работать, и через некоторое время это меня очень разозлило, так как я не вижу никаких проблем.

Я использую веб-пакет через Elixir в Laravel, который имеет такой gulpfile:

const elixir = require('laravel-elixir');

require('laravel-elixir-vue');

elixir(mix => {
mix.sass('app.scss')
   .webpack('app.js');
});

В мой файл app.js я "компилирую" следующий код

window.Vue = require('vue');

var VueResource = require('vue-resource');
var VueRouter = require('vue-router');

Vue.use(VueResource);
Vue.use(VueRouter);

И когда я звоню в консоль браузера

new VueRouter({})

Я получил сообщение об ошибке, говорящее, что VueRouter не определен. Почему? Ресурс vue есть даже в app.js.

Мой package.json выглядит так:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "foundation-sites": "^6.2.3",
    "gulp": "^3.9.1",
    "jquery": "^2.2.4",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "script-loader": "^0.7.0",
    "vue": "^2.0.1",
    "vue-resource": "^0.9.3",
    "vue-router": "^2.0.0"
  }
}

Кто-нибудь может помочь?


javascript vue.js laravel vue-router laravel-elixir
person Beau    schedule 11.10.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

это нормально, потому что вы не привязали VueRouter к объекту window, как вы сделали с window.Vue = require('vue');

Но обычно вам не нужен Router в window Сделайте это в своем app.js:

window.Vue = require('vue');

var VueRouter = require('vue-router');
window.Vue.use(VueRouter);

var router = new VueRouter({
  routes: {
    {path: '', component: require('./components/MyComponent.vue')},
    {path: '/dash', component: require('./components/Dash.vue')},
  }
});

var AppComponent = require('./components/App.vue');

/* eslint-disable no-new */
var app = new Vue({
  el: '#app',
  router,
  render: h => h(AppComponent),
});
person Psi    schedule 11.10.2016
comment
Итак, каково решение? Вы говорите, что я должен связать это таким образом window.Vue.use(VueRouter)? Потому что, если Vue не привязан к окну, он вообще не работает... - person Beau; 11.10.2016
comment
Не могли бы вы уделить несколько минут в скайпе или видеовстрече? Мне все равно не идет. - person Beau; 11.10.2016