基于vue3+TS构建的商城后台管理系统
根据coderwhy老师指导搭建的项目为PC端商品后台管理系统。

报错:

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

今天自己在做vue3+TS+cms的coderwhy老师的项目时,在项目起步,对axios进行封装时,
部分封装代码如下

 
import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
 
interface MYRequestInterceptors {
  requestInterceptor?: (config: AxiosRequestConfig) => AxiosRequestConfig
  requestInterceptorCatch?: (err: any) => any
  responseInterceptor?: (config: AxiosResponse) => AxiosResponse
  responseInterceptorCatch?: (err: any) => any
}
 
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",
    "husky": "^7.0.0",
    "less": "^4.0.0",
    "less-loader": "^8.0.0",
    "prettier": "^2.4.1",
    "typescript": "~4.5.5"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐