在vue-cli的基础上配置多页面应用

一、介绍

       大多数人使用vue开发项目都是直接用vue-cli直接创建，方便省事，但是咱们知道，这样直接开发的话都是spa（单页面）项目。然而有些时候咱们需要开发的是多页面项目，这种情况下直接用vue-cli不符合要求，自己手动用webpack搭建项目又太麻烦。

二、步骤

       其实有一个很简单的方法，还是使用vue-cli直接创建项目，vue给我们提供了一个手动配置的方式，就是根目录下的vue.config.js文件。（这里讲的是vue-cli 3.0之后的版本，之前的版本是在build文件夹里面配置的，这里不做讲解）

目录结构：

1、在public目录下新建one.heml、two.html，作用和index.html一样，多个html就是多个页面

2、在src目录下新建文件夹js，在js目录下新建one.js、one.vue、two.js、two.vue（你也可以不建js 文件夹，直接放src目录下）

one.js/two.js 其实就是和main.js一样的作用，作为程序入口文件，初始化vue实例并使用需要的插件,加载各种公共组件

one.vue/two.vue 的作用和App.vue一样，作为根组件

3、接下来就是重点了，在vue.config.js加入以下配置，如果根目录下没有vue.config.js就新建一个，如果上面几步你创建的文件夹或文件名跟我不一样，这里的路径就按照你的来修改

const path = require('path');

module.exports = {
    // outputDir: path.resolve(__dirname, "dist/aaa"),
    // publicPath:'/aaa'
    pages: {
        app: {
            entry: 'src/main.js',
            template: 'public/index.html',
            filename: 'index.html'
        },
        one: {
            entry: 'src/js/one.js',
            template: 'public/one.html',
            filename: 'one.html'
        },
        two: {
            entry: 'src/js/two.js',
            template: 'public/two.html',
            filename: 'two.html'
        }
    }
}

三、结果

项目跑起来之后就是这样了

这可不是用单页面路由的那种效果哈

 

接下来编译后

可以看到，三个页面的内容都在dist文件夹里面了

以上就是一个简单vue-cli单页面改多页面的讲解了

你也可以按照自己的需求，改变结构

如：

把每个页面的内容单独装起来，每个页面也可以有自己单独的router、store、组件。。。