基于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"
}
}
}