Heim > Artikel > Web-Frontend > So konfigurieren Sie mehrseitige Projekte in Vue.js
Verwenden Sie zunächst den folgenden Befehl, um ein neues Vue.js-Projekt zu erstellen
vue init webpack vue-3
Nachdem Sie das Projekt mit VsCode geöffnet haben, geben Sie das Projekt in der Befehlszeile ein, installieren Sie die relevanten abhängigen Bibliotheken und Führen Sie dann das Projekt aus und führen Sie den folgenden Befehl aus:
cd vue-3npm installnpm run dev
Wenn alles normal ist, geben Sie http://localhost:8080 in den Browser ein und eine Seite mit einem großen V-Symbol sollte erscheinen.
Nach Abschluss der oben genannten Vorbereitungen werden wir als nächstes die Konfiguration des mehrseitigen Projekts implementieren. Die erwarteten Effekte sind wie folgt:
Geben Sie http:// ein Der Browser localhost:8080/admin springt zu der Seite mit der Meldung Dies ist der Administrator-Login .
Wir erstellen das Seiten-/Anmeldeverzeichnis im src-Verzeichnis des Projekts
und erstellen dann drei neue Ordner unter dem Anmeldeverzeichnis: admin.html admin.js Admin.vue
Dann schreiben wir den entsprechenden Seitenanzeigecode , wobei der Code in
admin.html wie folgt lautet
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>管理员登录页面</title></head><body> <p id="admin"></p></body></html>
Der Code in Admin.vue lautet wie folgt
<template> <p id="admin"> <p>这里是管理员登录页面</p> </p></template><script>export default { name: 'Admin'}</script>
Der Code in admin.js lautet wie folgt
import Vue from 'vue'import Admin from './Admin.vue'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#admin', components: { Admin }, template: '<Admin/>'})
Nachdem der Code für die oben gezeigte Seite fertiggestellt ist, beginnen Sie mit der Konfigurationsarbeit
Öffnen Sie zunächst das build
-Verzeichnis
und fügen Sie eine neue Eintragsdatei zum Konfigurationsattribut der webpack.base.conf.js
-Datei: entry
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js', admin: './src/page/login/admin.js' },Umleitung im
unter webpack.dev.conf.js
der devServer
-Datei hinzufügen: rewrites
devServer: { clientLogLevel: 'warning', historyApiFallback: { rewrites: [ { from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, 'src/indexlogin/admin.html') }, { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, ], },Konfigurieren Sie auch eine mehr -Konfigurationselement in der Datei >Plug-in, das zum Generieren der Eintragsseite von admin.html
plugins
verwendet wird und gleichzeitig HtmlWebpackPlugin
hinzugefügt wird, um den Alias der Eintragsdatei anzugeben entsprechend dem vorherigen chunks
entry
Dann suchen wir das Verzeichnis plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env') }), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', chunks:['app'], inject: true }), new HtmlWebpackPlugin({ filename: 'src/page/login/admin.html', template: 'src/page/login/admin.html', chunks:['admin'], inject: true }),, öffnen die Datei
darin und fügen den folgenden Code unter dem Attribut config
hinzu: index.js
build
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), admin: path.resolve(__dirname, '../dist/src/page/login/admin.html'),Vollständig Um die Arbeit zu konfigurieren, führen Sie
npm run dev
Verwenden Sie zunächst den folgenden Befehl, um ein neues Vue.js-Projekt zu erstellen
vue init webpack vue-3Wenn alles normal ist, geben Sie http://localhost:8080 in den Browser ein und eine Seite mit einem großen V-Symbol sollte erscheinen.
cd vue-3npm installnpm run devNach Abschluss der oben genannten Vorbereitungen werden wir als nächstes die Konfiguration des mehrseitigen Projekts implementieren. Die erwarteten Effekte sind wie folgt:
Geben Sie http:// ein Der Browser localhost:8080/admin springt zu der Seite mit der Meldung
Dies ist der Administrator-Login. Wir erstellen das Seiten-/Anmeldeverzeichnis im src-Verzeichnis des Projekts
und erstellen dann drei neue Ordner unter dem Anmeldeverzeichnis:admin.html admin.js Admin.vue
Dann schreiben wir den entsprechenden Seitenanzeigecode , wobei der Code in
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>管理员登录页面</title></head><body> <p id="admin"></p></body></html>Der Code in admin.js lautet wie folgt
<template> <p id="admin"> <p>这里是管理员登录页面</p> </p></template><script>export default { name: 'Admin'}</script>Nachdem der Code für die oben gezeigte Seite fertiggestellt ist, beginnen Sie mit der Konfigurationsarbeit
import Vue from 'vue'import Admin from './Admin.vue'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#admin', components: { Admin }, template: '<Admin/>'})
Öffnen Sie zunächst das
-Verzeichnis und fügen Sie eine neue Eintragsdatei zum Konfigurationsattribut der build
-Datei: webpack.base.conf.js
entry
Umleitung im
module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js', admin: './src/page/login/admin.js' },der
-Datei hinzufügen: webpack.dev.conf.js
devServer
rewrites
Konfigurieren Sie auch eine mehr -Konfigurationselement in der Datei >Plug-in, das zum Generieren der Eintragsseite von admin.html
devServer: { clientLogLevel: 'warning', historyApiFallback: { rewrites: [ { from: /.admin/, to: path.posix.join(config.dev.assetsPublicPath, 'src/indexlogin/admin.html') }, { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, ], },verwendet wird und gleichzeitig
hinzugefügt wird, um den Alias der Eintragsdatei anzugeben entsprechend dem vorherigen plugins
. HtmlWebpackPlugin
chunks
Dann suchen wir das Verzeichnis entry
, öffnen die Datei
plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env') }), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', chunks:['app'], inject: true }), new HtmlWebpackPlugin({ filename: 'src/page/login/admin.html', template: 'src/page/login/admin.html', chunks:['admin'], inject: true }),hinzu:
config
index.js
build
Vollständig Um die Arbeit zu konfigurieren, führen Sie
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), admin: path.resolve(__dirname, '../dist/src/page/login/admin.html'),
npm run dev
Vue-cli erstellt eine einzelne Seite in mehrere Seiten Beispielcode für die Methode
So verwandeln Sie Vue-cli in einen Verlaufsmodus, der mehrere Seiten unterstützt
Das obige ist der detaillierte Inhalt vonSo konfigurieren Sie mehrseitige Projekte in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!