laravel中使用vue,gulp打包后报_vueRouter2.default is not a constructor

发布于 2022-09-04 20:04:39 字数 1609 浏览 10 评论 0

gulp打包成功,但在页面报js错误:
在Chrome的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')

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

北音执念 2022-09-11 20:04:39
new Vue({
    router,
    render: (h) => h(App)
}).$mount('#app')
变身佩奇 2022-09-11 20:04:39

楼主解决了嘛,我的也是这个问题

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文