실제 Vue 프로젝트 운영 및 솔루션에서 직면하는 함정

Pit 1. webpack

Solution: config의 index.js에서 빌드 객체의 자산PublicPath 속성 수준은 필요합니다. '/'로 조정 './'

 1  build: { 2     env: require('./prod.env'), 3     index: path.resolve(__dirname, '../dist/index.html'), 4     assetsRoot: path.resolve(__dirname, '../dist'), 5     assetsSubDirectory: 'static', 6     assetsPublicPath: './', 7     productionSourceMap: false,12     productionGzip: false,13     productionGzipExtensions: ['js', 'css'],18     bundleAnalyzerReport: process.env.npm_config_report19   }

 1 dev: { 2     env: require('./dev.env'), 3     port: 8080, 4     autoOpenBrowser: true, 5     assetsSubDirectory: 'static', 6     assetsPublicPath: '/', 7     proxyTable: {}, 8     // CSS Sourcemaps off by default because relative paths are "buggy" 9     // with this option, according to the CSS-Loader README10     // ()11     // In our experience, they generally work as expected,12     // just be aware of this issue when enabling this option.13     cssSourceMap: false14   }

이유:

개발 환경의 정적 폴더는 루트 디렉터리를 기반으로 하므로 '를 사용하세요. /'직접 . 예를 들어 http://localhost:8080/static/img/logo.png 형식입니다.

웹팩 패키징은 자동으로 static 폴더를 패키징한다는 점을 다들 아셔야 합니다. 기본적으로 dist 폴더는 프로덕션 환경 파일의 루트 디렉터리로 생성되고, static 폴더는 dist에 생성됩니다. 따라서 생성된 형식은 http://localhost:8080/dist/static/img/logo.png여야 합니다. 루트 디렉터리를 기반으로 하지 않으므로 '/' 해당 리소스를 찾을 수 없어야 합니다.

다음 속성의 의미를 소개하세요.

assetsRoot: webpack 출력의 대상 폴더 경로

assetsSubDirectory: webpack 컴파일 출력의 보조 폴더

assetsPublicPath: webpack 컴파일 출력의 릴리스 경로, 예: www / eat in .woshichihuo.com/eat 이 경로입니다

Pit 2. webpack으로 패키징한 후 로컬에서 index.html에 접속하면 흰색 화면이 나오며 리소스는 정상적으로 로딩됩니다

해결책: 라우팅 설정 모드를 기록 모드로 설정하지 마세요. 기본값은 여전히 ​​해시입니다. 라우터 폴더 아래 index.js 파일에 있습니다.

1 const router = new Router({2   // mode: 'history',3   routes: [4     index,5     home6   ]7 })

히스토리 모드가 필요한 경우 vue-router 공식 문서를 참조하세요:

위 내용은 실제 Vue 프로젝트 운영 및 솔루션에서 직면하는 함정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!