前言:本篇文章总结一下使用vue开发的一些项目配置以及一些开发技巧
ESLint检测:
- package.json : 全局规则配置文件
'rules': {
'no-new': 'off'
}
- 在js/vue文件中修改局部规则
/* eslint-disable no-new */
new Vue({
el: 'body',
components: { App }
})
- vue.config.js: 关闭规则检查
// 关闭ESLint的规则
lintOnSave: false,
api请求模块化配置 :
配置config文件夹下建立index.js
export default {
baseUrl:{
dev:"/api/",//开发的时候后台接口的地址
pro:""//上线产品发布之后,后台接口的地址
},
}
在api文件夹下建立index.js
import axios from 'axios'
import config from '@/config'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
//console.log(process.env.NODE_ENV)
class HttpRequest{
constructor(baseUrl){
this.baseUrl = baseUrl
this.queue = {}
}
getInsideConfig(){
const config = {
baseURL:this.baseUrl,
header:{
//
}
}
return config
}
interceptors(instance,url){
instance.interceptors.request.use((config)=>{
//处理config
console.log('拦截和处理请求')
config.data = {
msg:"helloworld"
}
console.log(config)
return config
})
instance.interceptors.response.use((res)=>{
//处理响应
console.log("处理响应")
//console.log(res)
return res.data
},(error)=>{
//请求出问题,处理问题
console.log(error)
return {error:"网络出错了"}
})
}
request(options){
const instance = axios.create()//创造实例对象
options = Object.assign(this.getInsideConfig(),options)
this.interceptors(instance,options.url)
return instance(options)
}
}
const axiosObj = new HttpRequest(baseUrl)
export default axiosObj
在具体的哪个业务请求下建议(例如data.js)
import axios from '@/api/axios'
export const getBannerData = ()=>{
return axios.request({
url:"banner",
method:'get'
})
}
// export const getUserData = () =>{
// return axios.request({
// url:"username",
// method:"get"
// })
// }
export const getPosiData = () =>{
return axios.request({
url:"posi",
method:"get"
})
}
export const getIndexEntryData = () =>{
return axios.request({
url:"index_entry",
method:"get"
})
}
export const getRestaurantsData = () =>{
return axios.request({
url:"restaurants",
method:"get"
})
}
跨域配置:
vue.config.js
devServer: { proxy: { '/api': { // 只对请求路由以/api开头的请求进行代理转发 target: &# |