Maison > Article > interface Web > Projet créé par vue-cli, configurez la méthode d'implémentation multipage

Projet créé par vue-cli, configurez la méthode d'implémentation multipage

亚连original: 2018-05-30 10:30:432074parcourir

Maintenant, je vais partager avec vous un projet créé par vue-cli et comment configurer plusieurs pages. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

L'outil de ligne de commande vue-cli officiellement fourni par vue peut rapidement créer une application d'une seule page. L'entrée de page par défaut est index.html Donc, si nous avons besoin de plusieurs pages, comment la configurer n'est en fait pas compliquée

Supposons que la page à créer soit une règle. Ce qui suit prend la règle comme exemple. 🎜>

Créer une nouvelle page html

<!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>

Créer les fichiers d'entrée Rule.vue et Rule. js, calqué sur App.vue et main.js

<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>

rule.js

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

Modifiez config/index.js

build pour ajouter l'adresse de la règle, c'est-à-dire l'adresse et le nom de la règle. html généré après la compilation

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

rule: path.resolve(__dirname, '../dist/rule.php') signifie qu'après la compilation, il est placé dans le fichier dist. Le nom du fichier compilé de Rule.html est Rule

Modify build/webpack.base.conf.js

Configure Entry<.>

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

Modifier build/webpack.dev.conf.js

Ajouter des plugins

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

Modifier le build /webpack.prod.conf.js

Ajouter des plugins

new HtmlWebpackPlugin({
   filename: config.build.rule,
   template: &#39;rule.html&#39;,
   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: &#39;dependency&#39;,
   chunks: [&#39;manifest&#39;,&#39;vendor&#39;,&#39;rule&#39;]
  }),

Tout ce qui précède

Lorsque l'adresse d'arrière-plan accède à votre page nouvellement créée, puisque l'itinéraire par défaut configuré maintenant est public, vous pouvez configurez vous-même plusieurs fichiers de routage et référencez-les séparément.

Vous pouvez parcourir dans Rule.vue pour accéder à l'itinéraire spécifié afin d'obtenir le contrôle de la page

mounted: function() {
			
	this.$router.replace({
		path:&#39;/rule&#39;
	});
},

Ce qui précède est ce que j'ai compilé pour tout le monde Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus