在学习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项目启动是否正常

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

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐