webpack不同环境打包配置
前⾔
webpack的env⼀般分为develop、test以及production，每个环境可能所需配置都不⼀样，⽐如请求的后端服务器等等若每次打包单独修改，那可能太过繁琐，最重要可能打包时忘记，造成不必要的损失
故⽽，建议将webpack区分不同环境单独配置好，打包时使⽤不同命令即可
⼀：环境配置
新建.env.dev⽂件
NODE_ENV='dev'
VUE_APP_BASE_UPL='开发环境api'
// 其他所需配置都可在此定义
新建.st⽂件
NODE_ENV='test'
VUE_APP_BASE_UPL='测试环境api'
// 其他所需配置都可在此定义
新建.env.prod⽂件
NODE_ENV='prod'
VUE_APP_BASE_UPL='⽣产环境api'
// 其他所需配置都可在此定义
⼆：请求配置
新建request.js⽂件
// 此为移动端配置，引⽤了vant组件，如要换成其他组件请修改配置
// import Vue from 'vue'
import axios from'axios'
import qs from'qs'
import{ isEmpty, isFormData, filterObj }from'@/utils/function.js'
import{ Toast, Dialog }from'vant'
let pending =[]// 声明⼀个数组⽤于存储每个ajax请求的取消函数和ajax标识
let CancelToken = axios.CancelToken
const TIMEOUT=3000
const baseURL = v.VUE_APP_BASE_UPL
const getErrorString =(errorObj, defaultStr ='')=>{
let errStr = defaultStr
// 对象
if(typeof errorObj ==='object'){
sponse && sponse.status){
errStr =`${sponse.status}-${sponse.statusText}`
}else ssage &&ssage ==='string'){
errStr =`${ssage}⽆返回或⾮正常操作`
}
}else if(typeof errorObj ==='string'){
errStr = errorObj
}
return errStr
}
const removePending= ever =>{
for(const p in pending){
if(pending[p].u === ever.url +'&'+ hod){
// 当当前请求在数组中存在时执⾏函数体
pending[p].f()// 执⾏取消操作
pending.splice(p,1)// 把这条记录从数组中移除
}
}
}
function handleResponse(response, options){
if(!response ||!options)return
if(options.showLoading && options.data &&!options.data.hideLoading){
Toast.clear()
}
if(response.status ===200){
const data = response.data
const contentType = response.headers['content-type']
de ==='40001'){
Dialog.alert({
message: ssage ||'内部错误'
}).then(()=>{
})
return
}
if(contentType && contentType.indexOf('json')!==-1){
if(structor === window.Blob){
const reader =new FileReader()
reader.addEventListener('loadend',function(){
const res =JSON.sult)
Toast(`${ssage ||'未知异常'}`)
})
}else{
const data =eval(response.data)
const{ success, message }= data
if(!success &&!Toast){
Toast(`${ssage ||'未知异常'}`)
}
}
}
}else if(response.status ===401&& options.showLoading){
Toast(`${ssage ||'未知异常'}`)
}else if(response.status >401){
Toast(`${ssage ||'未知异常'}`)
}else if(response.status ==='504'){
Toast('请求错误⽹络异常')
}
}
const fetch= options =>{
const{
method ='get',
data,
url,
headers,
config
}= options
/
/ const { sessionId } = store.state.login.user
const sessionId ='0lYo8du8U7KWFRhl_m1Oi9HfpAQ_9HeQnzkNlGr6lCjlQNT6BcDC!-1900339258!1628479544252'
const axiosConfig ={
timeout:TIMEOUT,
baseURL,
withCredentials:true,
headers:{
...headers,
'session': sessionId
}
}
}
const instance = ate(axiosConfig)
quest.use(
config =>{
// 判断是否需要显⽰满屏loading遮罩
if(options.showLoading && options.data &&!options.data.hideLoading){
Toast.loading({
mask:true,
loadingType:'spinner',
// message: '加载中...',
duration:30000,
getContainer:'#app'
})
}
removePending(config)// 在⼀个ajax发送前执⾏⼀下取消操作
config.cancelToken =new CancelToken(c =>{
// 这⾥的ajax标识我是⽤请求地址&请求⽅式拼接的字符串，当然你可以选择其他的⼀些⽅式
pending.push({ u: config.url +'&'+ hod, f: c })
})
return config
},
err =>{
ject(new Error(getErrorString(err,'request错误')))
}
)
sponse.use(
response =>{
try{
handleResponse(response, options)
// ------------------------------------------------------------------------------------------
fig)// 在⼀个ajax响应后再执⾏⼀下取消操作，把已经完成的请求从pending中移除// -------------------------------------------------------------------------------------------
}catch(err){}
return response
},
err =>{
sponse, options)
ject(new Error(getErrorString(err,'response错误')))
}
)
const filterData = isFormData ? data :filterObj(data)
LowerCase()){
case'get':
(
`${url}${!isEmpty(data)? `?${qs.stringify(data)}`:''}`,
config
)
case'delete':
return instance.delete(url,{ data: filterData })
case'head':
return instance.head(url, filterData)
case'post':
return instance.post(url, filterData, config)webpack打包流程 面试
case'put':
return instance.put(url, filterData, config)
case'patch':
return instance.patch(url, filterData)
default:
return instance(options)
}
}
export default function request(options){
export default function request(options){
return new Promise((resolve, reject)=>{
fetch(options)
.then(response =>{
resolve(response.data)
})
.catch(err =>{
reject(err)
})
})
}
// function.js⽂件配置
export let isEmpty= obj =>{
for(const el in obj){
return false
}
return true
}
// 过滤调对象中的⼀些值为空的属性
export let filterObj= obj =>{
let newObj ={}
for(const key in obj){
if(obj[key]==='undefined'|| obj[key]===null|| obj[key]===''){
continue
}else{
newObj[key]= obj[key]
}
}
return newObj
}
// 是否为formdata
export let isFormData= v =>{
return String.call(v)==='[object FormData]'
}
api中请求配置
// 在api⽂件夹中新建test.js⽂件
/******************* 接⼝ *******************/
export const apiTest= data =>{
request({
url:'接⼝url',
method:'请求⽅式',
data:data
});
};
页⾯中请求
// 获取声明请求url
import{apiTest}from'@/api/页⾯名称'
// 调⽤接⼝
apiTest(){
let params // 参数
apiTest(params).then(({ data })=>{
//成功处理
})
},
三：打包配置
在package.json中修改配置
"scripts":{
"serve":"vue-cli-service serve --open",
"start":"npm run serve",
"dev":"npm run start",
"build":"vue-cli-service build",
"build:dev":"vue-cli-service build --mode dev",// 开发环境打包
"build:test":"vue-cli-service build --mode test",// 测试环境打包
"build:prod":"vue-cli-service build --mode prod",// ⽣产环境打包"lint":"vue-cli-service lint"
},
四：相关知识：获取环境配置
// 在index.html中获取环境配置相关
'<%= VUE_APP_BASE_UPL %>'
// 在其他⽂件中获取环境配置相关，例如上⾯request中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。