search

Home  >  Q&A  >  body text

vue.js - Using vue in laravel, gulp packages and reports _vueRouter2.default is not a constructor

gulp packaging is successful, but a js error is reported on the page:
Error code in Chrome's console:

main.js?6e4b:26 Uncaught TypeError: _vueRouter2.default is not a constructor
    at Object.eval (eval at <anonymous> (main.js:128), <anonymous>:26:14)
    at eval (eval at <anonymous> (main.js:128), <anonymous>:33:30)
    at Object.<anonymous> (main.js:128)
    at __webpack_require__ (main.js:20)
    at main.js:64
    at main.js:67

package.json:

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browsersync-official": "^1.0.0",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "node-sass" :"^4.0.0",
    "sass": "^0.5.0",
    "sass-loader": "^6.0.3",
    "vue": "^2.1.0",
    "vue-resource": "^1.0.1",
    "vue-router": "^2.1.1",
    "webpack": "^2.1.0"
  },
  "dependencies": {
    "bootstrap-sass": "^3.0.0"
  }
}

gulpfile.js:

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

require('laravel-elixir-vue');

elixir(mix => {
    mix.webpack('main.js');
});

main.js:

import Vue from 'vue/dist/vue.js'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

//开启debug模式
Vue.config.debug = true;

import Example from './components/Example.vue'

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        { path: '/example', component: Example }
    ]
})

new Vue(Vue.util.extend({ router }, App)).$mount('#app')
世界只因有你世界只因有你2781 days ago911

reply all(2)I'll reply

  • 怪我咯

    怪我咯2017-05-16 16:49:05

    new Vue({
        router,
        render: (h) => h(App)
    }).$mount('#app')
    

    reply
    0
  • 仅有的幸福

    仅有的幸福2017-05-16 16:49:05

    Have you solved it? I have the same problem

    reply
    0
  • Cancelreply