vue 프로젝트 npm run build 후 index를 엽니다.html 공백, 일부 그림 글꼴 파일 불러올 수 없음 해결 방법

1999 단어
1. config 아래의 index를 수정합니다.js에서bulid 모듈이 내보내는 경로
 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

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

    //      
    assetsPublicPath: './',  



    /**
     * Source Maps
     */

    productionSourceMap: true,
    // 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
  }

이 단계를 끝낸 후 npm run build을 실행한 후 index를 엽니다.html, 당신은 페이지가 이미 나왔지만 일부 그림, 또는 글꼴 아이콘 종류가 정상적으로 표시되지 않은 것을 발견할 수 있습니다. 다음은 2부를 보십시오.
2. build 폴더 아래의utils를 수정합니다.js 파일
if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
         //    publicPath:'../../'
        publicPath:'../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

수정이 끝난 후 npm run build을 다시 실행하고 index를 엽니다.html 이때 페이지는 이미 완전하게 운행되기 시작했다
3. 상기 방법이 여전히 당신의 문제를 해결하지 못한다면
src 안의router/index.js 루트 설정에서 기본 모드는hash입니다.history 모드로 바꾸면 열기도 공백입니다.그래서hash로 바꾸거나 모드 설정을 삭제해서 기본값으로 하면 됩니다.history 모드를 굳이 사용하지 않으려면 서버에서 모든 상황을 덮어쓰는 후보 자원을 추가해야 합니다. URL이 정적 자원과 일치하지 않으면 index로 돌아가야 합니다.html 
// mode: 'history'  //   hash

HDU 2099 제거 의 끝자리
UVA 1493 DRAW A MASS

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage