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

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

Änderung der Run-Dev-Konfiguration

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

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

Modify webpack.prod .conf.js

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

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!