Detaillierte Erläuterung der Schritte zum Konfigurieren von Vue Multi-Page mit WebPack

Dieses Mal werde ich Ihnen die Schritte zum Konfigurieren von Vue Multi-Page mit WebPack ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Konfiguration von Vue Multi-Page mit WebPack? Schauen Sie mal rein.

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

Ende

Nun, ohne sie besteht keine Notwendigkeit, die Projektstruktur zu ändern. Je komplexer der Prozess, desto einfacher ist es, Fehler zu machen. Die obige Webpack-Konfiguration ist einfach und verständlich.

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:

Detaillierte Erläuterung der Schritte zum Aufbau einer Reaktionsentwicklungsumgebung mit Webpack

Die Befehlsverarbeitungsmethode kann nicht gefunden werden nachdem Nodejs das Modul global installiert hat

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Konfigurieren von Vue Multi-Page mit WebPack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!