本文是针对vue.config.js里的pages属性配置。详情见官网https://cli.vuejs.org/zh/config/#pages。
Vue.config.js是一个可选的配置文件,其中pages选项是构建多页面应用。
需求:vue搭建的项目中,需要多页面,并单独设置路由。
前提:利用Vue CLI创建项目。
目录结构:跟多页面相关的文件在红色框里面。
Public文件夹中的index.html和page2.html是配置多页面应用的模板来源。
Components里面是公用组件。
Pages文件夹里面的入口文件index.js和page2.js,相当于单页面中的main.js
Pages文件夹里面的Index.vue和Page2.vue,相当于单页面中的App.vue。
Pages文件夹里面的indexRouter.js和page2Router.js,相当于单页面中的router.js。
Views文件夹里面是vue组件。
第一步:
定义componens>AppHeader.vue公用组件:
<template>
<div>
<a href="./index.html" target="_blank">跳到首页</a>
<br/>
<a href="./page2.html" target="_blank">跳到page2页面</a>
</div>
</template>
<script>
export default {};
</script>
第二步:定义views里面的组件:
定义views>A.vue:
<template>
<div>A页面</div>
</template>
<script>
export default {
name:'A'
}
</script>
定义views>B.vue:
<template>
<div>B页面</div>
</template>
<script>
export default {
name:'B'
}
</script>
定义views>index.vue:
<template>
<div>index页面</div>
</template>
<script>
export default {
name:'Index'
}
</script>
第三步:定义pages文件夹里面的文件:
定义Pages>index>index.vue:
<template>
<div id="Index">
<app-header/>
<p>首页内容</p>
<router-link :to="{name:'A'}">跳到A页面</router-link>
<router-view/>
</div>
</template>
<script>
import AppHeader from '../../components/AppHeader'
export default {
name:'Index',
components:{
AppHeader
}
}
</script>
定义Pages>index>index.js:
import Vue from 'vue'
import Index from './Index.vue'
import router from './indexRouter'
Vue.config.productionTip = false
new Vue({
render: h => h(Index),
router
}).$mount('#Index')
定义Pages>index>indexRouter.js路由:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes:[
//首页
{
path:'/',
component:()=>import('@/views/index')
},
{
path:'/a',
name:'A',
component:()=>import('@/views/A')
}
],
mode:'history'
})
export default router
page2文件夹跟index文件夹类似:
定义Pages>page2>Page2.vue:
<template>
<div id="page2">
<app-header/>
<p>Page2页面</p>
<router-link :to="{name:'B'}">跳到B页面</router-link>
<router-view/>
</div>
</template>
<script>
import AppHeader from '../../components/AppHeader'
export default {
name:'Page2',
components:{
AppHeader
}
}
</script>
定义Pages>page2>Page2.js:
import Vue from 'vue'
import Page2 from './Page2.vue'
import router from './page2Router'
Vue.config.productionTip = false
new Vue({
render: h => h(Page2),
router
}).$mount('#page2')
定义Pages>page2>page2Router.js路由:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
routes:[
//首页
{
path:'/',
component:()=>import('@/views/index')
},
{
path:'/b',
name: 'B',
component:()=>import('@/views/B')
}
],
mode:'history'
})
export default router
第四步:定义public文件夹里面的index.html和page2.html模板文件;
定义index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
<title>index title</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="Index"></div>
<!-- built files will be auto injected -->
</body>
</html>
定义page2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>page2 title</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="page2"></div>
<!-- built files will be auto injected -->
</body>
</html>
第五步:设置vue.config.js文件;
'use strict'
const path = require('path')
function resolve(dir){
return path.join(__dirname,dir)
}
module.exports = {
publicPath:'/',
outputDir:'dist',
assetsDir:'static',
configureWebpack:{
name:'abc',
resolve:{
alias:{
'@':resolve('src')
}
}
},
pages:{
index:{
//应用入口配置,相当于单页面应用的main.js 必需
entry:'src/pages/index/index.js',
template:'public/index.html',
filename:'index.html'
},
page2:{
entry:'src/pages/page2/page2.js',
template:'public/page2.html',
filename:'page2.html'
}
}
}
主要看vue.config.js里面的pages选项,entry是入口文件,template是模板文件,filename是文件名。
访问http://localhost:8080/效果图: