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

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创建的项目,配置多页面的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • Vue-cli创建项目从单页面到多页面的方法
  • 详解vue-cli + webpack 多页面实例配置优化方法
  • vue-cli实现多页面多路由的示例代码
  • 详解webpack编译多页面vue项目的配置问题
赞 (0)

相关推荐

  • Vue-cli创建项目从单页面到多页面的方法

    Vue-cli创建项目从单页面到多页面的方法

    对于某些项目来说,单页面不能很好的满足需求,所以需要将vue-cli创建的单页面项目改为多页面项目. 需要修改以下几个文件: 1.下载依赖glob $npm install glob --save-dev 2.修改build下的文件 (1)修改webpack.base.conf.js 添加以下代码: var glob = require('glob'): var entries = getEntry('./src/pages/**/*.js') 将module.exports中的 entry:

  • vue-cli实现多页面多路由的示例代码

    vue-cli实现多页面多路由的示例代码

    项目下载地址 vue-cli多页面多路由项目示例:vue+webpack+vue-router+vuex+mock+axios Usage This is a project template for vue-cli. github上找到某大神的一个基于vue-cli模板的vueAdmin后台管理的模板,根据项目需求改成一个多页面多路由的vue项目. PC端:后台管理页面,单独的页面入口,单独的路由. 移动端:业务展示页面,单独的页面入口,单独的路由. 踩了无数的坑,终于是初见效果了,随后继续优

  • 详解vue-cli + webpack 多页面实例配置优化方法

    本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家 vue+webpack是否有多页面 目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈. 在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的. 那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,

  • 详解webpack编译多页面vue项目的配置问题

    本文主要介绍了webpack编译多页面vue项目的配置问题,分享给大家,具体如下: 一般情况下,构建一个vue项目的步骤为: 1,安装nodejs环境 2,安装vue-cli cnpm install vue-cli -g 3,构建vue项目 vue init webpack-simple vue-cli-multipage-demo 4, 安装项目依赖包 cnpm install 5,在开发环境下运行该项目: npm run dev 通过上面这几步一个简单的vue项目的开发环境基本就搭建起来,

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

    vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂 假设要新建的页面是rule,以下以rule为例 创建新的html页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=d

  • 使用Vue CLI创建typescript项目的方法

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue create my-vue-typescript 上下键选择,空格键确定 接下来是一些常规选项 下面是询问要不要记录这次配置以便后面直接使用,我们选择y 当确定配置后会在C:\Users\Administrator\.vuerc下生成一个刚选好的配置记录 { "useTaobaoRegistry"

  • vue cli 3.x 项目部署到 github pages的方法

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. https://github.com/nusr/resume-vue 1. vue-router 不要开启 history 模式 路径中的 # 比较丑,就开启了 vue-router 的 history 模式,去掉了 #.平时做项目也是默认开启 history 模式.折腾了半天发现,我这是部署到 g

  • vue cli构建的项目中请求代理与项目打包问题

    在上篇文章给大家介绍了vue-cli webpack模板项目搭建及打包时路径问题的解决方法,可以点击查看. vue-cli构建的项目中,生产模式下的打包路径.与生产模式下的请求代理简单示意 总结 以上所述是小编给大家介绍的vue cli构建的项目中请求代理与项目打包问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 您可能感兴趣的文章: Vue-cli创建项目从单页面到多页面的方法 Vue使用vue-cli创建项目 vue-cli项

  • IDEA2020.1.2创建web项目配置Tomcat的详细教程

    本文章是一篇IDEA创建web项目配置Tomcat的整合文章,并非原创,原文链接 https://blog.csdn.net/qq_45738810/article/details/107842532 https://www.cnblogs.com/shindo/p/7272646.html 作为初学者,先看了第一个链接里大佬的文章又看其他的文章表示很懵,为了避免各位和我一样,所以在此整合一下,希望能帮到各位! 第一步,先创建一个普通的Java项目 第二步,创建web项目.右键项目名–>Add

  • IDEA2022创建Web项目配置Tomcat的详细图文说明

    下面是在idea上面配置一个Tomcat的项目环境. 1.首先创建普通的一个Java项目,不要选择JavaEE  2.创建完成后按照下图所示,依次选择 File -> Add Framework Support -> Web Application -> 在WEB-INF文件夹下创建classes和lib文件夹  3.下面配置环境: File-> Project Structure-> Modules-> Paths-> 选择第二个“Use”,修改两个路径均为cl

  • VueCli4项目配置反向代理proxy的方法步骤

    Vue Cli4创建项目之后,没有配置vue.config.js,如果直接发起axios请求,可能会引起跨域问题. 以豆瓣电影首页的最近热门 为例: axios({ method: "get", url: "https://movie.douban.com/j/search_subjects", params: { type: "movie", tag: "热门", page_limit: 50, page_start: 0

  • 基于创建Web项目运行时出错的解决方法(必看篇)

    基于创建Web项目运行时出错的解决方法(必看篇)

    1.目录结构 2.各文件内容 index.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title> </head> <body> <form action="/Servlet" method="

  • vue router 跳转时打开新页面的示例方法

    记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用 <a> 标签,但事实上vue2版本的 <router-link> 是支持 target="_

  • vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)

    html代码: <section class="container page-home"> <div id="main-content" class="wrap-container zerogrid"> <article id="news_content" v-for="item in items"> <div class="col-1-2 right&q

随机推荐