vue에 흰색 화면이 언제 나타납니까?

Vue에 흰색 화면이 나타나는 세 가지 상황이 있습니다. 1. 라우팅 모드 모드를 기록으로 설정하거나 기록을 사용해야 하는 경우 모드 구성을 직접 삭제하면 됩니다. 모든 상황에서 리소스가 충분합니다. 2. 패키지된 dist 디렉터리의 파일 참조 경로가 올바르지 않으며 파일을 찾을 수 없기 때문에 오류가 보고되어 흰색 화면이 표시됩니다. config에서 index.js의 bulid 모듈이 내보낸 경로를 수정하면 됩니다. 3. 프로젝트에서는 es6 구문을 사용하지만 브라우저는 es6을 지원하지 않습니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

Vue

첫 번째: 라우팅 모드 모드가 기록으로 설정되어 있으므로 기본값은 해시입니다.

해결 방법: 모드 구성을 직접 해시로 변경하거나 삭제해야 한다면 모든 상황을 다루는 후보 리소스를 서버에 추가하세요.

기록 모드로 변경하면 열 때 공백이 됩니다. 그러니 해시로 변경하거나 모드 구성을 직접 삭제하여 기본값으로 설정하세요. 기록 모드를 사용해야 하는 경우 모든 상황을 포괄하는 후보 리소스를 서버에 추가해야 합니다. URL이 정적 리소스와 일치할 수 없는 경우 앱이 의존하는 페이지인 index.html을 반환해야 합니다.

두 번째 유형: 패키지된 dist 디렉터리의 파일 참조 경로가 올바르지 않으며, 파일을 찾을 수 없어서 오류가 보고되어 흰색 화면이 나타납니다.

해결책: config에서 index.js의 bulid 모듈이 내보낸 경로를 수정하세요.

index.html의 내용은 스크립트 태그를 통해 소개되기 때문에 경로가 잘못되어 열면 반드시 공백이 됩니다. 먼저 기본 경로를 살펴보겠습니다.

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

assetsPublicPath 기본값은 루트 디렉터리인 '/'입니다. index.html과 static은 같은 디렉토리에 있습니다. 그러니 './'로 변경하세요.

계속 오류가 발생하면 build/webpack.prod.conf.js 파일에서 webpackConfig를 수정하고 출력 속성에 publicPath: "./"를 추가한 후 다시 실행하세요. 포장.

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  }

세 번째 방법: 프로젝트에서 es6 구문이 사용됩니다. 일부 브라우저는 es6을 지원하지 않아 구문 분석할 수 없는 컴파일 오류가 발생하고 흰색 화면이 발생합니다.

해결책: Babel을 설치하면 Babel이 이러한 새로운 구문을 번역합니다. 더 낮은 버전의 코드로 변환합니다.

npm install --save-dev @babel/core @babel/cli @babel/preset-env

【학습 영상 공유: vue 영상 튜토리얼, 웹 프론트엔드 영상】

위 내용은 vue에 흰색 화면이 언제 나타납니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!