So verwenden Sie WebPack zum Konfigurieren von Vue Multi-Page

Dieses Mal zeige ich Ihnen, wie Sie WebPack zum Konfigurieren von Vue-Mehrseiten verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von WebPack zum Konfigurieren von Vue-Mehrseiten? sehen.

WebPack hat mich tausende Male gefoltert, ich habe sie wie meine erste Liebe genommen. Die Front-End-Seite eines Projekts ist fast fertig und das Webpack hat fast keine Konfiguration, sodass es als funktionsfähig angesehen werden kann. Jetzt müssen wir die Backend-Verwaltungsschnittstelle schreiben und ein separates Projekt starten, das nicht existiert. Also habe ich viele Artikel im Internet durchsucht und viele von ihnen haben die Struktur des Projekts geändert. Die Art und Weise, wie vue-cli es macht, muss ich immer wieder ändern. Für jemanden wie mich, der neu im Front-End ist, kann der Front-End-Teil nicht ausgeführt werden, wenn die Konfiguration des Webpacks geändert wird. . .

Also ich habe diese Notiz:

Erster Blick auf die Struktur des Projekts:

├── build
├── config
├── src
│ ├── api
│ ├── Assets
│ ├── Komponenten
│ ├── Seiten
│ ├ ─ ─ Router
│ ├── Utils
│ ├── vuex
│ ├── App.vue
│ ├── main.js
│ ├──. admin.j s
│ └── Admin.vue
├── statisch
│ └── Bilder
├── README.md
├── admin.html
├── index.html
├── package.json
└── Yarn.lock

Ich glaube, dass jeder mit dieser Struktur vertraut sein muss, außer admin.html und den folgenden Die src-Ordner Admin.vue, admin.js und einige API-, Pages-, Vuex- und andere Ordner sind die am häufigsten von vue-cli initialisierten Projektstrukturen.

Was ich möchte, ist einen Eingang zur Backend-Verwaltungsoberfläche admin.html hinzuzufügen. Andere, die geteilt werden können, sollten auf den Punkt gebracht werden:

Ändern Sie die Konfigurationsdatei des Webpacks

Ändern Sie webpack.base.conf.js

Öffnen Sie ~buildwebpack.base.conf.js, suchen Sie den Eintrag und fügen Sie mehrere Einträge hinzu:

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

Beim Ausführen der Kompilierung entspricht jeder Eintrag einem Block.

Änderung der Run-Dev-Konfiguration

Öffnen·~buildwebpack.dev.conf.js·, suchen Sie HtmlWebpackPlugin unter Plugins, dahinter Fügen Sie entsprechendes hinzu mehrere Seiten und fügen Sie die Chunk-Konfiguration für jede Seite wie folgt hinzu:

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']
}),

Änderung der Run-Build-Konfiguration

Änderung der Konfiguration /index.js

Öffnen Sie ~configindex.js und suchen Sie den Index unter Build: path.resolve(

dirname, '../dist/ index.html' ), fügen Sie danach mehrere Seiten hinzu:

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

Modify webpack.prod .conf.js

Öffnen Sie ~buildwebpack.prod.conf.js, suchen Sie HtmlWebpackPlugin unter Plugins, fügen Sie die entsprechenden mehreren Seiten dahinter hinzu und fügen Sie die entsprechenden Seiten zu jeder Seite hinzu. Fügen Sie die Chunk-Konfiguration hinzu zur Seite:

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']
}),

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie die Vux-Uploader-Bild-Upload-Komponente

vue:src Wie man mit Dateien umgeht Pfadfehler

Das obige ist der detaillierte Inhalt vonSo verwenden Sie WebPack zum Konfigurieren von Vue Multi-Page. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!