导入 vue-router 时显示 Vue is not defined 错误

Question

我使用 vue-cli 'vue init webpack-simple my-app' 命令创建了一个新项目。在那个全新的安装副本中，我试图在默认创建的 App.vue 组件中导入 vue-router。但它给我一个错误：'Uncaught ReferenceError: Vue is not defined'。如果我在 App.vue 中再次导入 vue，那么该应用程序运行良好。但是我已经在main.js中导入了vue，为什么还要在App.js中再次导入呢？有什么办法可以使用从 main.js 导入的 vue 吗？这是我的代码：

main.js:

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  import Vue from 'vue';   //**why I need to import it again? I already imported it in main.js
  import VueRouter from 'vue-router';
  Vue.use(VueRouter);

  import QuestionOne from './components/QuestionOneTemplate';

  const routes = [
    { path: '/', name: 'QuestionOne', component: QuestionOne },
  ];

  const router = new VueRouter({
    routes
  });

  window.router = router;

  export default {
    router,
    name: 'app',
    data () {
      return {
      }
    }
  }
</script>

<style lang="scss">
</style>

Answer 1

您做对了，您不必担心在多个文件中导入 Vue。当您发布应用程序并将其构建用于生产时，您将只有一个 "Vue import"。如果您查看 dist 文件夹和捆绑的 .js 文件，您会注意到 Vue 仅导入一次。

Answer 2

你试过吗？

import Vue from 'vue' import VueRouter from 'vue-router'

然后使用

Vue.use(VueRouter)

因为报错提示需要先导入vue才能使用vue-router

Answer 3

Is there any way i can use the imported vue from main.js?

不，您需要在每个使用 Vue 的文件中导入它。 imports/requires 是连接起来的方式。放心，每次导入都是同一个单例实例。

您可以使用 this.$router 和 this.$route 从 Vue 组件的 javascript 访问路由器，而无需导入，或者在模板内部，只需使用 $router 和 $route

不推荐，但您可以将 Vue 分配给 main.js 中的全局变量，并在不导入的情况下使用全局变量。

main.js

import Vue from 'vue';
global.MyVue = Vue

App.vue

import VueRouter from 'vue-router';

MyVue.use(VueRouter);

为什么

这就是 ES6 将事物联系起来的方式。考虑一下 wiring。如果有超过 1 个 Vue 库可用，链接器如何知道要使用哪个？如果另一个库定义了一个名为 Vue 的变量或函数怎么办？也许一个库将其自己的内部 Vue 用于事件总线或其他功能。

其他想法

显式导入还使 IDE 自动完成和语法突出显示效果更好。一些 IDE 可以自动添加导入，这让生活更轻松。

导入 vue-router 时显示 Vue is not defined 错误

showing Vue is not defined error while importing vue-router

vue-router

vuejs2

为什么

其他想法