1、報錯 元素隱式具有 "any" 類型，因為類型為 "any" 的表達(dá)式不能用于索引類型

代碼如下

// 未設(shè)置狀態(tài)碼則默認(rèn)成功狀態(tài)
   const code = res.data.code || 200;
   const errorCode = {
     401: '認(rèn)證失敗，無法訪問系統(tǒng)資源',
     403: '當(dāng)前操作沒有權(quán)限',
     404: '訪問資源不存在',
     default: '系統(tǒng)未知錯誤，請反饋給管理員'
   };
   // 獲取錯誤信息
   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 用于遍歷某種類型的屬性（可以操作接口、類以及基本數(shù)據(jù)類型）
首先通過typeof操作符獲取errorCode變量的類型，然后通過keyof操作符獲取該類型的所有鍵

2、引入ts文件報錯：找不到模塊“@/utils/auth”或其相應(yīng)的類型聲明。ts(2307)

image.png

...
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" 標(biāo)志時進(jìn)行默認(rèn)導(dǎo)入ts(1259)

image.png

image.png

image.png

4、import svgIcon from 'vite-plugin-svg-icons'不可調(diào)用

image.png

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
  ...
  plugins: [
    ...
    createSvgIconsPlugin({
      // 指定需要緩存的圖標(biāo)文件夾
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]'
    })
  ],
});

5、類型“NodeRequire”上不存在屬性“context”。

import path from 'path';
/********************************自動導(dǎo)包 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);
});
/********************************自動導(dǎo)包 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 源碼中設(shè)定了不允許在客戶端代碼中訪問內(nèi)置模塊代碼
最終解決方案
安裝

npm i path-browserify @types/path-browserify -D

import path from 'path-browserify';
// https://cn.vitejs.dev/guide/features.html#glob-import
/********************************自動導(dǎo)包 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];
}
/********************************自動導(dǎo)包 end********************************/
export default modules;