2021-10-30 首次尝试vue3+typescript 踩坑实录

第一次做vue3+typescript，记录一下自己踩过的坑，没有提前熟悉就一股脑做可太难了

1.在main.ts里引入App.vue报错
Could not find a declaration file for module './App.vue'. '/Users/shouguachen/Desktop/extra/demo/src/App.vue.js' implicitly has an 'any' type

1.jpg

解决方法(shims-vue.d.ts)引入写在声明里：

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

2.莫名其妙的报错：

is not assignable to parameter of type 'Component | WritableComputedOptions>, MethodOptions>'.
  Type 'typeof 

具体如图所示：

1635602101175.jpg

解决方法,重启生效（App.vue）：

3.ts自动识别不了后缀报错Cannot find module './App' or its corresponding type declarations.
解决方法：加上后缀.vue,js同理，都需要加上后缀, 总觉得应该是要配置什么loader，目前没有找到别的解决方法

4.安装ts-loader报错
Could not resolve dependency:peer webpack@"^5.0.0" from [email protected]
一般这种是版本过低，重新安装webpack对应的版本再安装ts-loader就行，安装less的时候也遇到了类似的报错，方法一样

5.配置路由报错
Property 'use' does not exist on type 'typeof import
This expression is not constructable
具体如图：

5.jpg

解决方法：
利用vue-router的api配置路由

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
const index = () => import('../views/index/index.vue') // 首页
const nav2 = () => import('../views/nav2/nav2.vue') // nav2
const nav3 = () => import('../views/nav3/nav3.vue') // nav2

const routes:Array = [
  {
    path: "",
    name: "Index",
    component: index,
  },
  {
    path: "/nav2",
    name: "nav2",
    component: nav2
  },
  {
    path: "/nav3",
    name: "nav3",
    component: nav3
  },
];
export const router = createRouter({
  history: createWebHashHistory(),
  routes
});

最后在main.ts里引入

import {router} from './router'
const app = createApp(App)
app.use(router)

6.TypeError: this.getOptions is not a function
一般是项目中用了sass和less没有安装，npm install less less-loader --save 即可
7.Invalid options in babel.config.js: "publicPath" is not allowed
这个问题是我自己犯的低级错误，配置应该写在vue.config.js里