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 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
jQuery参数列表集合
Apr 06 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
JS 日期比较大小的简单实例
Jan 13 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
微信小程序云开发详细教程
May 16 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
原生js实现下拉框选择组件
Jan 20 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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
基于PHP制作验证码
2016/10/12 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
动态加载css方法实现和深入解析
2017/01/18 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
python django集成cas验证系统
2014/07/14 Python
python读取各种文件数据方法解析
2018/12/29 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
总经理职责范文
2013/11/08 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
统计工作个人总结
2015/03/03 职场文书
全新239军机修复记
2022/04/05 无线电
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL