vue中使用typescript问题解决方案集锦
本文环境
@vue/cli 4.3.1
typescript 3.9.5
相关配置文件
vue.config.js
tsconfig.json
shims-vue.d.ts
问题汇总
导入 vue 文件报错
错误信息：Cannot find module ‘./App.vue’ or its corresponding type declarations
解决方案：修改shims-vue.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
Vscode 报错，编译不报错
解决方案：重启 Vscode
挂载原型$api 报错
解决方案：在src目录下新增vue-property.d.ts
import Vue from 'vue'
declare module "vue/types/vue" {
interface Vue {
$api: any;
}
}
无法使用@components别名 alias 路径
解决方案: 修改tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": ["webpack-env", "vuex"],
"paths": {
"@/*": ["src/*"],
"@/components": ["src/components"] // 添加这一行
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
"exclude": ["node_modules"]
}
版权声明: 本文首发于 指尖魔法屋-vue中使用typescript问题解决方案集锦（https://blog.thinkmoon.cn/post/876_vue%E4%B8%AD%E4%BD%BF%E7%94%A8typescript%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E9%9B%86%E9%94%A6/） 转载或引用必须申明原指尖魔法屋来源及源地址！