vue一个项目多入口打包的简单解决方案

本文章本人并没有成功完成项目上线。如有看到此文章，可以当成一种思路，不要觉得是正确的，本人并不觉得完美

项目需要，本来单页面的项目，要改成入口多页面，打包之后也是多页面，这就需要改造项目结构

下面我们开始：

项目是vue-cli3.0

需要改变的东西，先列出来

1.src目录结构

2.vue.config.js配置

3.页面间的图片，scss，main.js中的文件引用

1.我们先来看目录结构

image.png

项目修改之后的结构就这样，我就主要说下我这个项目吧

views目录下，分了两个小项目，index和mon
会先在views目录下创建这两个文件夹，然后复制main.js到这两个文件夹下，连带着app.vue也可以
然后把原先的项目拆分成两个，index项目的放到index下面，mon项目的放到mon下面
就保证每个子项目有main.js入口文件就可以了

然后结构改变之后，现在运行项目肯定会报错的

下面我们再来配置下vue.config.js就好了

配置如下：

'use strict'
const path = require('path')
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = {
// 多页面入口配置pages
    pages: {
        index: {
          // page 的入口
          entry: 'src/views/index/main.js',
          // 模板来源
          template: 'public/index.html',
          // 在 dist/index.html 的输出
          filename: 'index.html',
          // 当使用 title 选项时，
          // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
          title: 'index',
          // 在这个页面中包含的块，默认情况下会包含
          // 提取出来的通用 chunk 和 vendor chunk。
          chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        mon: {
          // page 的入口
          entry: 'src/views/mon/main.js',
          // 模板来源
          template: 'public/index.html',
          // 在 dist/index.html 的输出
          filename: 'mon.html',
          // 当使用 title 选项时，
          // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
          title: 'mon',
          // 在这个页面中包含的块，默认情况下会包含
          // 提取出来的通用 chunk 和 vendor chunk。
          chunks: ['chunk-vendors', 'chunk-common', 'projectB']
        }
    },
    productionSourceMap: false,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtorem({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            }
        }
    },
    devServer: {
        // 设置代理
        proxy: {
            '/api': {
                target: 'http://XXX.com', // 域名
                changOrigin: true, // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                secure: false,
                ws: false, // 是否启用websockets
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    }
}

看上面代码注释就能知道，其实主要的配置就是pages里面的东西
pages下面配置两个入口，index和mon

这时候，配置基本就算完成了
然后运行项目 npm run serve