vue-cli构建多页面应用

1、通过脚手架vue-cli构建项目

vue create test

2、先看一下vue-cli构建项目的原始目录

3、test项目根目录下创建vue.config.js文件添加多页面配置

4、如下编辑vue.config.js文件

module.exports = {
    pages: {
        index: {
            // index页面的入口
            entry: 'src/pages/index/main.js',
            // index页面模板来源
            template: 'public/index.html',
            // index页面最终打包在dist目录下输出文件名
            filename: 'index.html',
            // 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'index'
        },
        login: {
            // login页面的入口
            entry: 'src/pages/login/main.js',
            // login页面模板来源
            template: 'public/page1.html',
            // login页面最终打包在dist目录下输出文件名
            filename: 'login.html',
            title: 'login'
        }
    }
}

5、按照vue.config.js文件中配置的entry页面入口路径创建相应的文件夹及文件

6、在对应的页面中使用构建单页面应用时的方式将.vue文件通过vue的实例进行绑定注册挂载