사업총화

vue 프로젝트에서 부딪힌 문제
1. 프로젝트 ssr 도입 후 페이지 404 리셋
해결 방법:
koa2-connect-history-api-fallback 플러그인 도입
구성 예:

const historyApiFallback = require('koa2-connect-history-api-fallback');

app.use(historyApiFallback({ whiteList: ['/api'] }));

2. vue 구성 요소가 불러오기를 늦추고 첫 페이지main.bundle.js 크기
해결 방법:
(1)es 제안의 import()
vue-router 구성 라우팅 게으름, 코드는 다음과 같습니다.

//   2   ，    webpackChunkName，         js  。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')

(2) 비동기 부품 기술

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require(['../components/PromiseDemo'], resolve)
}

3. 작업 후 페이지 새로 고침

vue-router로 현재 페이지로 다시 연결하고 페이지는 리셋하지 않습니다

window를 사용합니다.reload() 또는 router.go(0) 리셋 시 전체 브라우저가 다시 불러오고 깜빡이며 체험이 좋지 않습니다

해결 방법:
하위 구성 요소가 부모 구성 요소에 상태를 전달하고provide와 inject를 사용하여 데이터를 주입하여 페이지를 새로 고칩니다
provide/inject 조합 사용하기
작용: 하나의 조상 구성 요소가 모든 자손 후대에 의존을 주입하도록 허용한다. 구성 요소의 차원이 아무리 깊어도 상하류 관계가 성립되는 시간에 시종 효력이 발생한다.
App.vue
reload 방법을 설명하고,router-view의 표시나 숨김을 제어하여, 페이지의 다시 불러오는 것을 제어합니다
tableList.vue
페이지에 App 주입vue 구성 요소 제공 (provide)의reload 의존, 논리가 완성된 후 (삭제 또는 추가) 직접this.reload () 호출을 사용하면 현재 페이지를 새로 고칠 수 있습니다.
4. 여러 줄이 생략된 경우 삭제되는 스타일도 있습니다 - 웹키트-box-orient
이것은 웹키트의 구덩이입니다. autoprefixer가 유행이 지난 스타일을 삭제해서 생긴 것입니다.
해결 방법:
보존된 스타일의 앞뒤에 주석autoprefixer 스위치를 설정하면 보존하면 됩니다.
주의: 웹 패키지에서 주석을 삭제하는 플러그인을 설정하면 위 방법은 작동하지 않습니다.autoprefixer 구성을 수정해야 합니다.
5. 이전 페이지에서 타이머가 지워지지 않았습니다.
해결 방법:
vue 구성 요소 내 내비게이션 수위 before Route Leave를 사용해서 제거하거나 구성 요소를 제거할 때 삭제합니다.
6. 암호를 전송하려면 암호화가 필요합니다.
해결 방법:
JSEncrypt를 사용하여 암호화를 위해 공개 키를 생성합니다.
7. 일부 페이지는 로그인 상태에서만 접근할 수 있으며, 로그인하지 않으면 바로login 페이지로 이동합니다
해결 방법:
루트의 메타 정보를 빌려 vuex,token과 결합하여store에 값을 부여하고 루트를 지킬 때 이 루트의 메타가 로그인해야 하는지 검사할 수 있습니다.가로막다.
8. 페이지 전환 시 페이지 맨 위로 창 이동
해결 방법:
윈도우로.scollTo(0, 0).
9.vue 멀티 페이지 응용 시 nginx 경로 설정 404
해결 방법:
nginx는 경로를 설정할 때 경로와 vue-router의base를 일치시켜야 합니다.
10.h5페이지 1인 1표 기능 실현
해결 방법:
쿠키의 판단에 따라 투표한 사용자를 대상으로 서버 set-cookie는 더 이상 투표에 참여할 수 없습니다.
11. 코드 구조 최적화

if...else문장과 switch문장을 없애고 삼원표현식, 단락표현식 또는 대상(사전 데이터 구조)으로 대체한다.

for순환을 없애고 맵, Filter 등 고급 함수나 함수식 프로그래밍으로 대체(귀속)한다.

다용도 해구 부수, 함수 전참 최적화, 다변수 부수 최적화, 중복 코드량 감소.

async/await로 비동기 요청을 처리하여promise

대신
12. 윈도우즈에서 환경 변수를 설정할 수 없습니다
환경 변수는 nodejs 언어의 변수입니다. node에서 전역 변수process는 현재의 node 프로세스를 표시합니다.process.env는 시스템 환경에 대한 정보를 포함하고 있습니다.하지만 프로세싱은.env에는 NODE 이 없습니다.ENV 이거.NODE_ENV는 사용자가 정의한 변수로 웹 패키지에서 그 용도는 생산 환경이나 개발 환경을 판단하는 근거이다.
환경 변수의 역할은 우리가 공정화되어 포장되었을 때 각종 명령을 맞춤형으로 설정할 수 있도록 하는 것이다. 예를 들어 어떤 명령을 개발에서 실행하도록 요구하면 NODE 를 설정할 수 있다.ENV=development 및 환경 변수의 컨텐트를 직접 정의할 수 있습니다.vue-cli와 결합하여 분석할 수 있습니다.
크로스-env 플러그인을 패키지에 설치합니다.json에서 크로스-env를 추가하는 것을 설정합니다.
예:

'analyz': 'cross-env NODE_ENV=production npm_config_report=true npm run build';

여기에는 명령을 실행하기 전에 두 개의 환경 변수가 설정되어 있습니다
** 확장: **DefinePlugin은 전역 변수를 만들 수 있고 컴파일할 때 설정할 수 있기 때문에 이 속성을 사용하여 전역 변수를 설정하여 개발 환경과 공식 환경을 구분할 수 있습니다.이것이 DefinePlugin의 기본 기능입니다.그래서 우리는 웹 패키지에서config.js에 다음 코드 설정 전역 변수 정보를 추가합니다.

module.exports = {
    plugins: [
      //         
        new webpack.DefinePlugin({
            PRODUCTION: JSON.stringify(true),
            VERSION: JSON.stringify('5fa3b9'),
            BROWSER_SUPPORTS_HTML5: true,
            TWO: '1+1',
            'typeof window': JSON.stringify('object'),
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        })
    ]
};

13. 웹팩3에서 웹팩4로 업그레이드
공통점:
1. 웹팩4는 입구점을 정의할 필요가 없다. 이것은./src/index.기본값으로 js
2、CommonsChunkPlugin 제거
3. 압축을 UglifyJS2로 업그레이드
4. JSON 및 Tree Shaking 지원
14.vue 루트 간 전달 매개 변수
두 가지 방법:
1,query: path 전달을 지원하고 url 뒤에 매개 변수와 값을 표시합니다
2. params:name 방식 전달을 지원하며 매개 변수와 값을 표시하지 않습니다
주의:query 전참, 페이지를 새로 고치면 인자를 잃어버리지 않습니다.근데 파람스는 삼을 잃어버려요.
15.vue 캐시 페이지
솔루션:
router-view에keep-alive를 싸서 캐시를 엽니다.
캐시가 필요한 페이지에 메타 루트 정보를 추가하여 페이지의 캐시를 제어합니다.
더 나아가beforeRouterLeave(to,from,next)를 사용하여 방문할 페이지에 캐시 데이터가 필요한지 유연하게 제어할 수 있다.
16. 일부 플러그인은 서버 렌더링에서 navigator is not defined 오류를 보고합니다.
원인은 두 가지로 나뉜다.
1. 일부 플러그인은 브라우저의api를 사용하여 서버에서 렌더링할 때 식별할 수 없으며 비동기적으로 불러오는 방식이 필요합니다.
이 때 import으로 가져올 수 없습니다. Require를 사용해야 합니다.

let hello
if (typeof window !== 'undefined') {
	hello = require('hello')
}

2. 일부 플러그인은 다른 플러그인에 우선적으로 의존한다. 예를 들어bootstrap은 jquery에 의존한다.
이 때 jquery를 컴파일할 때 웹 패키지로 전역에 노출합니다. 예를 들어:

new webpack.ProvidePlugin({
    $ : "jquery",
    jQuery : "jquery",
    "window.jQuery" :"jquery"
})

17. 정적 자원을 cdn에 놓고 끊으면
다음과 같은 코드를 사용하여 손쉽게 해결할 수 있습니다.
끊으면 뒤에 로컬 자원 라이브러리를 도입해야 합니다.
18. 검색 기능 모호 검색
watch 감청 속성을 사용하여 입력을 감청하고 절류 함수에 맞추며 결과를 얻기 전에 중간 상태를 설정할 수 있습니다.
19.vue 캐시 페이지 이후 캐시된 페이지를 삭제해야 합니다
솔루션:
루트의leave 생명주기나 이 구성 요소의 deactive 생명주기에서this.$를 사용할 수 있습니다destroy.캐시된 이 구성 요소를 혼비백산하십시오.그러나 이 구성 요소는 제거된 후에 더 이상 캐시되지 않는다는 단점이 있다.
그래서 keep-alive에 있는include 동적bind 하나의 그룹을 vuex로 동적으로 변경할 수 있습니다. 현재 캐시가 필요한component를 표시합니다.beforeRouterLeave를 사용하여 캐시 페이지 동적 제어