vue 전역 패키지 로드 튜 토리 얼(전역 감청)

선언:
페이지 의 아름다움 을 위해 인 터 페 이 스 를 요청 할 때 지연 되 고 데이터 가 없습니다.페이지 가 너무 걸 립 니 다.loading 을 밀봉 하고 인터페이스 가 성공 한 후에 숨겨 달라 고 요청 합 니 다.(저 는 vant 구성 요 소 를 사용 하여 자신의 상황 에 따라 변경 합 니 다)
첫 번 째 단계:
loading.vue 만 들 기

<template>
 <div class="loading">
 <van-loading size="36px" vertical>   ...</van-loading>
 </div>
</template>

<script>
export default {
 props: {},
 data() {
 return {};
 },
 computed: {},
 created() {},
 mounted() {},
};
</script>

<style scoped>
</style>

두 번 째 단계:
app.vue 도입 증가 스위치


코드:

<loading v-show="isLoading"></loading>
import { mapState } from "vuex";
import loading from "./components/loading";

 computed: {
 ...mapState(["isLoading"])
 },
 components: {
 loading
 },

//css
.loading {
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 position: fixed;
 padding-top: 5.333333rem;
}

세 번 째 단계:
vuex 저장 상태

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
 isLoading: false//loading    
 },
 mutations: {
 changeisLoading(state, data) {
 state.isLoading = data
 }
 },
})
export default store

네 번 째 단계:
인터페이스 상 태 를 감청 하고 전역 적 으로 isLoading 상 태 를 변경 합 니 다(main.js 도입 또는 자신 이 js 도입)

//      
axios.interceptors.request.use(
 config => {
 //   vuex  isLoading    ，  true，loading  
 store.state.isLoading = true
 return config;
 },
 error => {
 return Promise.error(error);
 }
);

//      
axios.interceptors.response.use(
 response => {
 //          200，        ，        
 //         
 if (response.status === 200) {
 //loading  
 store.state.isLoading = false
 return Promise.resolve(response);
 } else {
 return Promise.reject(response);
 }
 },
 error => {
 if (error.response.status) {
 return Promise.reject(error.response);
 }
 }
);

OK 패키지 완료!
vue-cli 4 APP 핫 업데이트 실효 즉시 업데이트 불가
머리말
프로젝트 에서 문제 가 발생 했 습 니 다.열 업데이트 가 효력 을 잃 었 습 니 다.매번 에 알 리 지 못 했 습 니 다.바 이 두 는 많은 방법 을 알 렸 습 니 다.효과 가 현저 하지 않 았 습 니 다.나중에 webpack 4.0 은 수 동 으로 열 업 데 이 트 를 설정 해 야 한 다 는 것 을 알 게 되 었 습 니 다.기본 값 은 켜 지지 않 았
해결 방법
1.웹 팩-dev-server 에 의존 하 는 설치
자신의 상황 에 따라 npm/cnpm 설치
npm install --save-dev webpack-dev-server / cnpm install --save-dev webpack-dev-server
2.vue.config.js 파일 설정
vue-cli 4 폴 더 는 이전 과 큰 차이 가 있 기 때문에 vue.config.js 에 관련 인 자 를 설정 하고 devserver 설정 을 추가 해 야 합 니 다.

devServer: {
 compress: true,
 disableHostCheck: true, //webpack4.0      
 }

위 치 는 아래 그림 과 같다.

3.package.json 파일 설정
package.json 의 scripts 대상 에 명령 을 추가 하여 로 컬 서 비 스 를 시작 합 니 다.
"serve": "vue-cli-service serve && webpack-dev-server --open"
위 치 는 아래 그림 과 같다.

다시 시작
마지막 으로 npm run server 를 실행 한 후 다시 포장 하고 열 업데이트 실효 문제 해결
이상 의 vue 전역 패키지 loading 로드 튜 토리 얼(전역 감청)은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.