带有Vue 3的Vue路由器引发17个警告并且app文件的内容不显示

Posted 2023-02-22

【中文标题】带有Vue 3的Vue路由器引发17个警告并且app文件的内容不显示

【英文标题】：Vue router with Vue 3 raises 17 warnings and the contents of the app file are not displayed

【发布时间】：2021-09-20 04:32:15

【问题描述】：

我正在尝试构建一个简单的单页应用程序，因此我创建了一个项目选择 (Default (Vue 3 Preview) ([Vue 3] babel, eslint))，然后我手动设置了路由跟着vue掌握教程https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/ 问题是我运行后在 cmd 中出现了 17 个警告（npm run serve）

我的 cmd 输出：（其中一些，因为它太大了）

 WARNING  Compiled with 17 warnings                                                11:40:21 PM
 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

"export 'computed' was not found in 'vue'

 warning  in ./src/main.js

"export 'createApp' was not found in 'vue'

 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js

"export 'defineComponent' was not found in 'vue'

这是我的 App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
  </div>
  <router-view />
  </div>
</template>

<script>
export default 
  name: 'App',
  components: 

  

</script>

<style>
#app 
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

</style>

这是我的 /src/router/index.js

import  createWebHistory, createRouter  from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";

const routes = [
  
    path: "/",
    name: "Home",
    component: Home,
  ,
  
    path: "/about",
    name: "About",
    component: About,
  ,
];

const router = createRouter(
  history: createWebHistory(),
  routes,
);

export default router;

这是我的 /src/main.js

import  createApp  from 'vue'
import App from './App.vue'
import router from './router' // <---

createApp(App).use(router).mount('#app')

我的 package.json

  "name": "frontend-gp",
  "version": "0.1.0",
  "private": true,
  "scripts": 
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  ,
  "dependencies": 
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^2.0.2",
    "core-js": "^3.6.5",
    "vue": "^3.1.4",
    "vue-router": "^4.0.10",
    "vue-template-compiler": "^2.6.14"
  ,
  "devDependencies": 
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.1.4",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^6.0.1",
    "sass-loader": "^10.2.0"
  ,
  "eslintConfig": 
    "root": true,
    "env": 
      "node": true
    ,
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": 
      "parser": "babel-eslint"
    ,
    "rules": 
  ,
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]

如果您需要更多资源，请告诉我

【问题讨论】：

请分享您的 package.json 文件

@BoussadjraBrahim 我将立即编辑问题

@BoussadjraBrahim 我确实在上面的问题中分享了我的 package.json 文件，请查看

【参考方案1】：

你应该卸载当前的 vue 版本并安装新版本：

npm uninstall vue -S

然后

npm install vue@next -S

【讨论】：

我仍然收到这两个警告 ``` ./src/main.js 中的警告 "export 'default' (imported as 'Vue') was not found in 'vue' warning in ./src /router/index.js“在'vue-router'中找不到导出'default'（导入为'router'）```

请显示路由器文件中的导入

import * as Vue from 'vue';从'vue-router'导入*作为VueRouter；从“vue-router”导入 createWebHistory, createRouter ；从“@/views/Home.vue”导入主页；从“@/views/About.vue”导入关于；

我注意到问题中没有正确添加 router/index.js 文件，因此我对其进行了编辑

删除import * as Vue from 'vue'; import * as VueRouter from 'vue-router';