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那样将VueRouter绑定到window.Vue = require('vue');对象

但通常你不需要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),
});

无法让vue-router与webpack

1 个答案: