vue多页面应用

本文是针对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公用组件:

 

第二步：定义views里面的组件：

定义views>A.vue:

定义views>B.vue:

定义views>index.vue:

 

第三步：定义pages文件夹里面的文件：

定义Pages>index>index.vue:

定义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:

定义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:

 

定义page2.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/效果图：