vue-cli创建的项目,配置多页面的实现方法


Posted in Javascript onMarch 15, 2018

vue官方提供的命令行工具vue-cli,能够快速搭建单页应用。默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂

假设要新建的页面是rule,以下以rule为例

创建新的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>

创建入口文件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']
  }),

以上全部

当后台地址跳转到你的新建的页面后,由于现在配置的默认路由是公用的,可自己配置多个路由文件,分别引用。

可在Rule.vue中路由跳转到指定路由,以实现页面控制

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

以上这篇vue-cli创建的项目,配置多页面的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js location.replace与location.reload的区别
Sep 08 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 #Javascript
iview中Select 选择器多选校验方法
Mar 15 #Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 #Javascript
基于IView中on-change属性的使用详解
Mar 15 #Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 #Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 #Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 #Javascript
You might like
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
理解JavaScript的prototype属性
2012/02/11 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
pyhton列表转换为数组的实例
2018/04/04 Python
Python实现的计算器功能示例
2018/04/26 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
详解Canvas事件绑定
2018/06/27 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
高中生学习生活的自我评价
2013/10/09 职场文书
党员学习十八大感想
2014/01/17 职场文书
少先队入队活动方案
2014/02/08 职场文书
节水标语大全
2014/06/11 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
教师工作失职检讨书
2014/09/18 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
草房子读书笔记
2015/06/29 职场文书
食堂管理制度范本
2015/08/04 职场文书
入党后的感想
2015/08/10 职场文书
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA