vue-cli3 为项目添加多入口

git代码地址：https://github.com/miaSlady/vue3Demo.git

添加多入口原因：

由于vue为单页面项目，通过控制组件局部渲染，main.js是整个项目唯一的入口，整个项目都在一个index.html外壳中。

若项目过大，会造成单页面负载过重；同时，多页面利于模块独立部署。

添加多入口过程：

1.在public中新建多个页面：

2.配置多份路由/main.js/app.js(将原来的一份抄录为多份指向自己的组件路由即可)

3.在vue配置文件中（vue.config.js）配置多页面。

module.exports = {

    ...,

  pages:{

    index: {

      // 应用入口配置，相当于单页面应用的main.js，必需项

      entry: 'src/Index_config/main.js',

  

      // 应用的模版，相当于单页面应用的public/index.html，可选项，省略时默认与模块名一致

      template: 'public/index.html',

  

      // 编译后在dist目录的输出文件名，可选项，省略时默认与模块名一致

      filename: 'index.html',

  

      // 标题，可选项，一般情况不使用，通常是在路由切换时设置title

      // 需要注意的是使用title属性template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>

      // title: 'console page',

  

      // // 包含的模块，可选项

      // chunks: ['console']

    },

    test: {

      // page 的入口

      entry: 'src/Test_config/main.js',

  

      // 应用的模版，相当于单页面应用的public/index.html，可选项，省略时默认与模块名一致

      template: 'public/test.html',

  

      // 编译后在dist目录的输出文件名，可选项，省略时默认与模块名一致

      filename: 'test.html',

    },

}

4.当访问时：域名/index.html 或  域名/test.html  即可。