1、报错 元素隐式具有 "any" 类型，因为类型为 "any" 的表达式不能用于索引类型
代码如下
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
const errorCode = {
401: '认证失败，无法访问系统资源',
403: '当前操作没有权限',
404: '访问资源不存在',
default: '系统未知错误，请反馈给管理员'
};
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode.default;
image.png
最终解决方案如下：
const msg = errorCode[code as keyof typeof errorCode] || res.data.msg || errorCode.default;
解析：keyof
keyof 用于遍历某种类型的属性（可以操作接口、类以及基本数据类型）
首先通过typeof操作符获取errorCode变量的类型，然后通过keyof操作符获取该类型的所有键
2、引入ts文件报错：找不到模块“@/utils/auth”或其相应的类型声明。ts(2307)
image.png
解决方案如下：
在vite.config.ts文件中
...
import { resolve } from 'path';
const pathResolve = (dir: string) => {
return resolve(__dirname, '.', dir);
};
export default defineConfig({
...
resolve: {
alias: {
'@': pathResolve('src/')
}
}
});
在tsconfig.json文件中
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
}
}
3、模块 ""path"" 只能在使用 "allowSyntheticDefaultImports" 标志时进行默认导入ts(1259)
image.png
image.png
解决方案如下：
在tsconfig.node.json文件中
添加
"allowSyntheticDefaultImports": true
image.png
4、import svgIcon from 'vite-plugin-svg-icons'不可调用
image.png
原因：版本问题当前为vite-plugin-svg-icons@2.0.1
解决方案如下：
在vite.config.ts文件中
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
...
plugins: [
...
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]'
})
],
});
5、类型“NodeRequire”上不存在属性“context”。
import path from 'path';
/********************************自动导包 start********************************/
const file = require.context('./', true, /\.ts/);
const modules = {};
file.keys().forEach((key: string) => {
const name = path.basename(key, '.ts');
modules[name] = file(key).default || file(key);
});
/********************************自动导包 end********************************/
export default modules;
解决方法：
5.1第一次使用的解决方案
不报错了，但是运行依然报错
npm i @types/webpack-env -D
在文件tsconfig.json中加入
"types": [...，"webpack-env"]
5.2使用第一种方案报错 Uncaught ReferenceError: require is not defined**
第二种解决方案：
import path from 'path';
// https://cn.vitejs.dev/guide/features.html#glob-import
const files = import.meta.glob('./modules/*.ts');
const modules = {} as any;
for (const key in files) {
const name = path.basename(key, '.ts');
modules[name] = files[key];
}
5.3第二种解决方案后运行报错 Module "path" has been externalized for browser compatibility and cannot
原因：原因是 vite 源码中设定了不允许在客户端代码中访问内置模块代码
最终解决方案
安装
npm i path-browserify @types/path-browserify -D
import path from 'path-browserify';
// https://cn.vitejs.dev/guide/features.html#glob-import
/********************************自动导包 start********************************/
const files = import.meta.glob('./*.ts');
const modules = {} as any;
for (const key in files) {
const name = path.basename(key, '.ts');
modules[name] = files[key];
}
/********************************自动导包 end********************************/
export default modules;
