vue3 + ts项目(无vite)报错记录
vue3 + ts项目(无vite)报错记录
·
记录项目创建后遇到的报错
1.类型“Window & typeof globalThis”上不存在属性“_CONFIG”。ts(2339)
问题描述:
使用全局 window 上自定义的属性,TypeScript 会报属性不存在
解决:需要将自定义变量扩展到全局 window 上,在项目的xxx.d.ts文件添加如下代码声明
declare interface Window {
_CONFIG: any
}
添加后好像得重启编译器
2.axios报错
2.1 问题描述:
这个报错是因为axios版本更新后出现了新的类型导致的问题,可以根据此贴中的描述来解决,也可以用回旧版本解决,我是用回了0.21.x的旧版本
yarn add axios@^0.21.1
2.2 类型“AxiosResponse”上不存在属性“success”。ts(2339)
解决:封装文件中追加声明描述
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
declare module "axios" {
interface AxiosResponse<T = any> {
result:any
success:any,
// 这里追加你的参数
}
export function create(config?: AxiosRequestConfig): AxiosInstance;
}
3.vue.config.js路径别名配置
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
publicPath: "/",
outputDir: "dist",
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
.set('@assets', resolve('src/assets'))
.set('@views', resolve('src/views'))
.set('@comp', resolve('src/components'))
}
});
4.项目引入第三方库的关键字报错
问题描述:
这里就是第三方库的关键字DC
报错了
解决:还是在xxx.d.ts文件中追加关键字声明
declare var DC: any
5.全局函数或全局变量注册
在main.ts文件中
//引入全局函数
import isLogin from './utils/utils'
const app = createApp(App)
app.config.globalProperties.$isLogin = isLogin
在页面中使用
//模板
<div >
{{ $isLogin() ? "用户": "登录" }}
</div>
//语法糖
<script setup lang="ts">
import { reactive, ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
console.log("proxy", proxy.$isLogin());
然后页面报了一个错误
需要在项目中新建一个xxx.d.ts文件,添加以下代码
export {}
declare module 'vue' {
interface ComponentCustomProperties {
$isLogin: any
}
}
更多推荐
已为社区贡献7条内容
所有评论(0)