2

我试图让 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 资源甚至在 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"
  }
}

任何人都可以帮忙吗？

4

1 回答 1

1

没关系，因为你没有像你那样将 VueRouter 绑定到window对象window.Vue = require('vue');

window 但通常你不需要在你的 app.js中的 Do it 中使用路由器：

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),
});
于 2016-10-11T13:26:53.960 回答