使用TS+vue3封装axios时编译报错，提示You may need an additional loader to handle the result of these loaders(1)

基础面试题

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

开源分享：docs.qq.com/doc/DSmRnRG…

interface MYRequestConfig extends AxiosRequestConfig { interceptors?: MYRequestInterceptors }

class MYRequest { instance: AxiosInstance interceptors?: MYRequestInterceptors

constructor(config: MYRequestConfig) { this.instance = axios.create(config) this.interceptors = config.interceptors

this.instance.interceptors.request.use(
  this.interceptors?.requestInterceptor,
  this.interceptors?.requestInterceptorCatch
)
this.instance.interceptors.response.use(
  this.interceptors?.responseInterceptor,
  this.interceptors?.responseInterceptorCatch
)

} request(config: MYRequestConfig): void { this.instance.request(config).then((res) => { console.log(res) axios.create(config).interceptors.request.use() }) } }

export default MYRequest

**npm run serve 一直报错，报错信息如下：**

vue3-ts-cms@0.1.0 serve vue-cli-service serve

INFO Starting development server... 98% after emitting CopyPlugin

ERROR Failed to compile with 1 error 上午12:06:18

error in ./src/service/request/index.ts

Module parse failed: Unexpected token (7:61) File was processed with these loaders: * ./node_modules/cache-loader/dist/cjs.js * ./node_modules/babel-loader/lib/index.js * ./node_modules/ts-loader/index.js * ./node_modules/eslint-loader/index.js You may need an additional loader to handle the result of these loaders. | this.instance = axios.create(config); | this.interceptors = config.interceptors;

this.instance.interceptors.request.use(this.interceptors?.requestInterceptor, this.interceptors?.requestInterceptorCatch);

| this.instance.interceptors.response.use(this.interceptors?.responseInterceptor, this.interceptors?.responseInterceptorCatch); | }

自己在Google上搜了好久，都没有找到解决方案，自己感觉是版本问题，后来把所有依赖全部删掉，  
 重新下载，自己并没有下载源码中的npm包版本，  
 我是在github上找了一个近期维护的代码，维护时间为（2022.04.16）


自己实现该项目的时间为（2022.06.24），我的`package.json`配置如下：

{ "name": "vue3-ts-cms", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "prettier": "prettier --write .", "prepare": "husky install", "commit": "cz" }, "dependencies": { "@element-plus/icons-vue": "^1.1.4", "axios": "^0.26.1", "core-js": "^3.8.3", "countup.js": "^2.1.0", "dayjs": "^1.11.1", "echarts": "^5.3.2", "element-plus": "^2.1.9", "normalize.css": "^8.0.1", "vue": "^3.2.13", "vue-router": "^4.0.3", "vuex": "^4.0.0" }, "devDependencies": { "@commitlint/cli": "^16.2.3", "@commitlint/config-conventional": "^16.2.1", "@typescript-eslint/eslint-plugin": "^5.18.0", "@typescript-eslint/parser": "^5.18.0", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-typescript": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-service": "~5.0.0", "@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-typescript": "^9.1.0", "babel-plugin-import": "^1.13.3", "commitizen": "^4.2.4", "cz-conventional-changelog": "^3.3.0", "eslint": "^7.32.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-vue": "^8.6.0",

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】