javascript - 无法让 vue-router 与 webpack 一起工作

Question

我试图让 vue-router 工作但没有成功，一段时间后我很生气，因为我没有看到任何问题。

我在 Laravel 中通过 Elixir 使用 webpack，它有这样的 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-resource 甚至在 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"
  }
}

有人能帮忙吗？

Answer 1

没关系，因为您没有像使用 window.Vue = require('vue');

那样将 VueRouter 绑定(bind)到 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),
});