vue.js 3项目整合vue-router 4的问题

在学习vue.js，通过vue脚手架生成了一个vue项目，名为vue_router_example，带着router配置，代码未做改动

package.json 如下

复制代码

{
  "name": "vue_router_example",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "typescript": "~4.5.5"
  }
}

可知，默认指定的vue-router是4.0.3，启动后报错

复制代码

  App running at:
  - Local:   http://localhost:8080/
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run npm run build.

ERROR in src/router/index.ts:1:64
TS7016: Could not find a declaration file for module 'vue-router'. 'E:/frontend/vue_router_example/node_modules/vue-router/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/vue-router` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-router';`
  > 1 | import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
      |                                                                ^^^^^^^^^^^^
    2 | import HomeView from '../views/HomeView.vue'
    3 |
    4 | const routes: Array<RouteRecordRaw> = [

按照要求执行命令后依旧报错，重新创建一个纯净的vue项目来看一下什么问题，名为vue_example。

package.json 如下

复制代码

{
  "name": "vue_example",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "typescript": "~4.5.5"
  }
}

执行命令

复制代码

npm install vue-router@4

package.json 如下

复制代码

{
  "name": "vue_example",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^3.2.13",
    "vue-router": "^4.6.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "typescript": "~4.5.5"
  }
}

启动后报错和上面一致，执行删除命令

复制代码

npm uninstall vue-router @types/vue-router

把vue_router_example中的vue-router升高一个版本，安装命令如下

复制代码

npm install vue-router@4.0.4

启动正常，不太理解是怎么回事。

vue.js 3.2.13对应vue-router各个版本的启动情况

|--------------|-------|-------|-------|
| vue-router版本 | 4.0.3 | 4.0.4 | 4.6.3 |
| vue项目启动是否正常 | 否 | 是 | 否 |

查了一下具体什么原因也不清楚，官网上也没有说明的地方，比较奇怪。