vue-cli创建多个入口

创建项目

执行命令

vue create demo-template

选择第二个 项目文件结构

│  .gitignore
│  babel.config.js
│  package-lock.json
│  package.json
│  README.md
│  
├─public
│      favicon.ico
│      index.html
│      
└─src
    │  App.vue
    │  main.js
    │  
    ├─assets
    │      logo.png
    │      
    └─components
            HelloWorld.vue

创建多个子项目

src下的文件

├─pageA
│  │  App.vue
│  │  main.js
│  │  
│  ├─assets
│  │      logo.png
│  │      
│  └─components
│          HelloWorld.vue
│          
└─pageB
    │  App.vue
    │  main.js
    │  
    ├─assets
    │      logo.png
    │      
    └─components
            HelloWorld.vue

根目录下创建vue.config.js

module.exports = {
    pages: {
        pageA: {
            // page 的入口
            entry: 'src/pageA/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'pageA.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'project A Page',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'pageA']
        },
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        pageB: {
            // page 的入口
            entry: 'src/pageB/main.js',
            // 模板来源
            template: 'public/index.html',
            // 在 dist/index.html 的输出
            filename: 'pageB.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'project B Page',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'pageB']
        }
    }
}

执行npm run build后的dist文件目录

│  favicon.ico
│  pageA.html
│  pageB.html
│  
├─css
│      pageA.f98b18b1.css
│      pageB.fa03f741.css
│      
├─img
│      logo.82b9c7a5.png
│      
└─js
        chunk-vendors.6dfbe408.js
        chunk-vendors.6dfbe408.js.map
        pageA.a3b08dba.js
        pageA.a3b08dba.js.map
        pageB.79a7372e.js
        pageB.79a7372e.js.map

在目录中可以看到pageA.html和pageB.html文件。当本地启动时访问不同的页面

http://localhost:8081/pageA
http://localhost:8081/pageB

vue.config.js文件设置不够灵活，这里就要使用到node的进程变量控制了 如果不知道node的进程变量可以到node的官网查看，也可以在vue.config.js打印查看。

//vue.config.js


let projectname = process.argv[3];//获取变量
var glob = require("glob");

if (!projectname && process.env.NODE_ENV !=='development') {
    console.log('请输入要启动或者打包模块');
    process.exit();//退出执行
}

function getEntry() {
    var entries = {};
    if (process.env.NODE_ENV == "production") {
      entries = {
        index: {
          // page的入口
          entry: "src/" + projectname + "/main.js",
          // 模板来源
          template: "public/index.html",
          // 在 dist/index.html 的输出
          filename: "index.html",
          title: projectname,
          chunks: ["chunk-vendors", "chunk-common", "index"]
        }
      };
    } else {
      var items = glob.sync("./src/*/*.js");
      for (var i in items) {
        var filepath = items[i];
        var fileList = filepath.split("/");
        var fileName = fileList[fileList.length - 2];
        entries[fileName] = {
          entry: `src/${fileName}/main.js`,
          // 模板来源
          template: `public/index.html`,
          // 在 dist/index.html 的输出
          filename: `${fileName}.html`,
          // 提取出来的通用 chunk 和 vendor chunk。
          chunks: ["chunk-vendors", "chunk-common", fileName]
        };
      }
    }
    return entries;
  }
  

module.exports = {
    productionSourceMap: false, // 生产禁止显示源代码
    outputDir: "dist/" + projectname,
    pages: getEntry()
}

再次执行打包命令 dist文件夹

pageA
    │  favicon.ico
    │  index.html
    │  
    ├─css
    │      index.1c0f155a.css
    │      
    ├─img
    │      logo.82b9c7a5.png
    │      
    └─js
            chunk-vendors.6dfbe408.js
            index.3315c2b4.js

启动和打包

启动

npm run dev

//访问 localhost:8080/pageA

打包

npm run build [module]

//不输入module不给与打包

参考地址

源码地址