How to find the source of the problem of cannot redefine $router

the project is built by vue-cli. SAP, runs without error with npm run dev. After using npm run build, the generated js is put into erb and reported to cannot redefine $router,. Some answers say that vue router is defined twice, or vue is packaged twice, but my analyzer shows that I only packaged vue
analyzervue
I have the following code related to vue and vue-router in the following file
main.js

import Vue from "vue"
import App from "./App"
import store from "./store"
import router from "./router"

import CSRFToken from "./assets/js/csrf-token.js"
import "./assets/css/bootstrap.min.css"
import "./assets/css/style.css"

...

let app = new Vue({ 
  el: "-sharpapp",  
  router,
  store,
    template: "<App/>",
  components: { App },
})

router/index.js

import Vue from "vue"
import VueRouter from "vue-router"
import Index from "@/Index"
import Explore from "@/Explore"
import Question from "@/Question"
import NewQuestion from "@/NewQuestion"
import Notification from "@/Notification"
import Dashboard from "@/Dashboard"
import Dashboard_default from "@/Dashboard_default"
import test from "@/test"

Vue.use(VueRouter)

export default new VueRouter({
...
}

store/index.js

import Vue from "vue"
import Vuex from "vuex"
import router from "../router"

Vue.use(Vuex)

export default new Vuex.Store({
...
})

would you please give us some advice to see what went wrong


Global search for 'vue-router'' to see if the browser reports an error. As for packaging, multiple references to the same package (different versions are not counted) will not be repeatedly packaged in the same bundle.


excuse me, what is analyzer?


add Filter to webpack.base.conf.js to remove dependencies
module.exports = {

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex'
}

}

Menu