Von vue-cli erstelltes Projekt, mehrseitige Implementierungsmethode konfigurieren-js-Tutorial-php.cn

Von vue-cli erstelltes Projekt, mehrseitige Implementierungsmethode konfigurieren

亚连

Freigeben： 2018-05-30 10:30:43

Original

2039 Leute haben es durchsucht

Jetzt werde ich ein von vue-cli erstelltes Projekt und die Konfiguration mehrerer Seiten mit Ihnen teilen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist.

Das offiziell von vue bereitgestellte Befehlszeilentool vue-cli kann schnell eine einseitige Anwendung erstellen. Der Standardseiteneintrag ist index.html. Wenn wir also mehrere Seiten benötigen, ist die Konfiguration eigentlich nicht kompliziert.

Angenommen, die zu erstellende Seite dient als Beispiel 🎜>

Erstellen Sie eine neue HTML-Seite

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<title></title>
	</head>
	<body>
		<span style="color:#000000;"><p id="rule"></p></span>
		<!-- built files will be auto injected -->
	</body>
</html>

Nach dem Login kopieren

Erstellen Sie die Eintragsdateien Rule.vue und Rule.js, modelliert nach App.vue und main

config/index.js ändern

Erstellen und fügen Sie die Regeladresse hinzu, bei der es sich um die Adresse und den Namen der nach der Kompilierung generierten Rule.html handelt

<template>
	<p id="rule">
		<router-view></router-view>
	</p>
</template>
<script>
	export default {
		name: &#39;lottery&#39;,
		data() {
			return {
			}
		},
		mounted: function() {
			
			this.$router.replace({
					path:&#39;/rule&#39;
			});
		},
	}
</script>
<style lang="less">
	body{
		margin:0;
		padding:0;
	}
</style>

Nach dem Login kopieren

Regel: path.resolve(__dirname, '../dist/rule.php') bedeutet, dass es nach der Kompilierung in der dist-Datei abgelegt wird Der Dateiname von „rule.html“ lautet „rule.php“

Build/webpack.base.conf.js ändern

Konfigurationseintrag

import Vue from &#39;vue&#39;
import Rule from &#39;./Rule.vue&#39;
import router from &#39;./router&#39;
import $ from &#39;jquery&#39;
//import vConsole from &#39;vconsole&#39;
import fastclick from &#39;fastclick&#39;
Vue.config.productionTip = false
fastclick.attach(document.body)
Vue.config.productionTip = false;
 
/* eslint-disable no-new */
new Vue({
 el: &#39;#rule&#39;,
 router,
 template: &#39;<Rule/>&#39;,
 components: { Rule },
})

Nach dem Login kopieren

build/webpack.dev.conf .js ändern

Plugins hinzufügen

build: {
  // Template for index.html
  index: path.resolve(__dirname, &#39;../dist/index.php&#39;),
  rule: path.resolve(__dirname, &#39;../dist/rule.php&#39;),
  ……
 }

Nach dem Login kopieren

Build/webpack.prod.conf.js ändern

Hinzufügen

entry: {
  app: &#39;./src/main.js&#39;,  
  rule: &#39;./src/rule.js&#39;
 },

Nach dem Login kopieren

alles das Obige

wenn die Hintergrundadresse zu springt Nachdem Sie eine neue Seite erstellt haben, können Sie mehrere Routing-Dateien selbst konfigurieren und separat darauf verweisen, da die jetzt konfigurierte Standardroute öffentlich ist.

Sie können zur angegebenen Route in Rule.vue springen, um die Seitenkontrolle zu erreichen

new HtmlWebpackPlugin({ 
   filename: &#39;rule.html&#39;, 
   template: &#39;rule.html&#39;, 
   inject: true, 
   chunks:[&#39;rule&#39;] 
  }),

Nach dem Login kopieren

Das Obige habe ich für Sie zusammengestellt Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Methoden zum Abrufen von Dom-Elementen basierend auf vue1 und vue2

nodejs+mongodb aggregierte Kaskadenabfrageoperation Beispiel

JS implementiert die Methode, aus einem Link einen QR-Code zu generieren und ihn in ein Bild umzuwandeln

Das obige ist der detaillierte Inhalt vonVon vue-cli erstelltes Projekt, mehrseitige Implementierungsmethode konfigurieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!