欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue-cli創(chuàng)建的項目,配置多頁面的實(shí)現(xiàn)方法

 更新時間：2018年03月15日 10:36:46   作者：cookysurongbin  
下面小編就為大家分享一篇vue-cli創(chuàng)建的項目,配置多頁面的實(shí)現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

vue官方提供的命令行工具vue-cli，能夠快速搭建單頁應(yīng)用。默認(rèn)一個頁面入口index.html，那么，如果我們需要多頁面該如何配置，實(shí)際上也不復(fù)雜

假設(shè)要新建的頁面是rule，以下以rule為例

創(chuàng)建新的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;"><div id="rule"></div></span>
		<!-- built files will be auto injected -->
	</body>
</html>

創(chuàng)建入口文件Rule.vue和rule.js，仿照App.vue和main.js

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

rule.js

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

修改config/index.js

build添加rule地址，即編譯后生成的rule.html的地址和名字

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

rule: path.resolve(__dirname, '../dist/rule.php')表示編譯后再dist文件下，rule.html編譯后文件名為rule.php

修改build/webpack.base.conf.js

配置entry

entry: {
  app: './src/main.js',  
  rule: './src/rule.js'
 },

修改build/webpack.dev.conf.js

在plugins增加 

new HtmlWebpackPlugin({ 
   filename: 'rule.html', 
   template: 'rule.html', 
   inject: true, 
   chunks:['rule'] 
  }),

修改build/webpack.prod.conf.js

在plugins增加

new HtmlWebpackPlugin({
   filename: config.build.rule,
   template: 'rule.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','rule']
  }),

以上全部

當(dāng)后臺地址跳轉(zhuǎn)到你的新建的頁面后，由于現(xiàn)在配置的默認(rèn)路由是公用的，可自己配置多個路由文件，分別引用。

可在Rule.vue中路由跳轉(zhuǎn)到指定路由，以實(shí)現(xiàn)頁面控制

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

以上這篇vue-cli創(chuàng)建的項目,配置多頁面的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論