집 > 기사 > 웹 프론트엔드 > WebPack으로 Vue 다중 페이지를 구성하는 단계에 대한 자세한 설명

WebPack으로 Vue 다중 페이지를 구성하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-21 14:36:551447검색

이번에는 WebPack으로 Vue 멀티 페이지를 구성하는 단계에 대해 자세히 설명하겠습니다. WebPack으로 Vue 멀티 페이지를 구성할 때 주의사항은 무엇인가요?

WebPack은 나를 수천 번 고문했고 나는 그녀를 첫사랑처럼 데려갔습니다. 프로젝트의 프론트엔드 페이지는 거의 작성이 완료되었고, webpack은 설정이 거의 0에 가까워서 작동한다고 볼 수 있습니다. 이제 백엔드 관리 인터페이스를 작성하고 존재하지 않는 별도의 프로젝트를 시작해야 합니다. 그래서 인터넷에서 많은 기사를 검색했는데, 그 중 많은 기사가 프로젝트의 구조를 수정했습니다. vue-cli가 하는 방식이 왜 계속해서 수정되어야 하는지 모르겠습니다. 저처럼 프론트엔드를 처음 접하는 사람은 webpack의 설정을 바꾸면 프론트엔드 부분이 실행이 안되는 경우가 있습니다. . .

그래서 다음 메모가 있습니다.

먼저 프로젝트 구조를 살펴보세요.

├── build
├── config
├── src
│ ├── api
│ ├── 자산
│ ├── 구성 요소
│ ├── 페이지
│ ├── 라우터
│ ├── utils
│ ├── vuex
│ ├── App.vue
│ ├── main.js
│ ├ ─ ─ admin.js
│ └── Admin.vue
├── static
│ └── Images
├── README.md
├── admin.html
├── index.html
├─ ─ package.json
└── Yarn.lock

admin.html 및 src 폴더 아래에는 Admin.vue 및 admin.js 외에도 api, Pages, vuex 및 vue-cli로 초기화되는 가장 일반적인 프로젝트 구조입니다.

내가 원하는 것은 배경 관리 인터페이스 admin.html에 대한 입구를 추가하는 것입니다. 공유할 수 있는 다른 항목은 공유됩니다.

webpack의 구성 파일을 수정

webpack.base.conf.js

~buildwebpack.base.conf.js를 열고 항목을 찾은 다음 여러 항목을 추가하세요.

entry: {
 app: './src/main.js',
 admin: './src/admin.js' //新增
},

이런 방식으로 컴파일을 실행하면 각 항목이 청크에 해당됩니다. .

개발 구성 수정 실행

Open·~buildwebpack.dev.conf.js·, 플러그인에서 HtmlWebpackPlugin을 찾아 그 뒤에 해당하는 여러 페이지를 추가하고 다음과 같이 각 페이지에 대한 청크 구성을 추가합니다.

new HtmlWebpackPlugin({
 filename: 'index.html', //生成的html
 template: 'index.html', //来源html
 inject: true, 
 chunks: ['app']//需要引入的Chunk，不配置就会引入所有页面的资源
}),
new HtmlWebpackPlugin({
 filename: 'admin.html',
 template: 'admin.html',
 inject: true,
 chunks: ['admin']
}),

실행 빌드 구성 수정

Modify config/index.js

~configindex.js를 열고 빌드 아래에서 인덱스를 찾습니다: path.resolve(

dirname, '../ dist/index. html'), 그 뒤에 여러 페이지 추가:

admin: path.resolve(dirname, '../dist/admin.html'),

Modify webpack.prod.conf.js

Open ~ buildwebpack.prod.conf.js, 플러그인에서 HtmlWebpackPlugin을 찾아 그 뒤에 해당하는 여러 페이지를 추가하고 각 페이지에 청크 구성을 추가하세요.

new HtmlWebpackPlugin({
 filename: config.build.index,
 template: 'index.html',
 inject: true,
 minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 // more options:
 // https://github.com/kangax/html-minifier#options-quick-reference
 },
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
 filename: config.build.admin,
 template: 'admin.html',
 inject: true,
 minify: {
 removeComments: true,
 collapseWhitespace: true,
 removeAttributeQuotes: true
 },
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'admin']
}),

End

글쎄, 없으면 안 됩니다. 어떤 프로젝트 구조가 수정되더라도 프로세스가 복잡할수록 실수할 확률이 높아집니다. 위의 웹팩 구성은 간단하고 이해하기 쉽습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!