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

2024-07-09 22:41:03

字体：大中小

来源：转载

供稿：网友

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 ><div ></div></span>		<!-- built files will be auto injected -->	</body></html>

创建入口文件Rule.vue和rule.js，仿照App.vue和main.js

<template>	<div >		<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 = falsefastclick.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']  }),

上一篇：PHP加速 eAccelerator配置和使用指南

下一篇：PHP封装的远程抓取网站图片并保存功能类