vue-cli3搭建多入口应用项目搭建以及webpack配置

我们平时开发 vue项目的时候,就有一种感觉就是 vue就像是专门为单页应用而诞生的,因为人家的官方文档中也说了。其实不是的,因为vue在工程化开发的时候依赖于 webpack ,而webpack是将所有的资源整合到一块后形成一个html文件 一堆 js文件, 如果将vue实现多页面应用,就需要对他的依赖进行重新配置,也就是修改webpack的配置文件。

vue.config.js官方配置指南现附上官网链接。

1、用cli脚手架创建单页面应用
单页面的项目的基本目录结构

├── public
│ ├── favicon.ico # ico图标
│ └── index.html # 首页模板
├── src
├─assets 公共资源文件
│ ├─css
│ ├─img
│ └─js
├─components 公共组件
├─views
│ ├─page.vue
│ App.vue
│ main.js 入口文件
├─store
│ ├─modules
│ └─index.js
└─utils

2、新建vue.config.js
通过vue-cli3脚手架初始化项目之后，发现webpack的config配置文件没有了。这是由于vue-cli3将webpack的基础配置全部内嵌了。那我们想要优化或者修改配置怎么办呢？vue-cli3它预留了一个vue.config.js的js文件供我们对webpack进行自定义配置。
通过一下步骤自定义webpack配置：

在项目根目录下，新增js文件vue.config.js。vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
3、单页面应用webpack的基本配置
这个文件应该导出一个包含了选项的对象

const path = require('path')

module.exports = {
   
    publicPath: './', // 基本路径
    outputDir: 'dist', // 输出文件目录
    lintOnSave: false, // eslint-loader 是否在保存的时候检查
    productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
    // css: {
   
    //     extract: true, // 是否使用css分离插件 ExtractTextPlugin
    //     sourceMap: false, // 开启 CSS source maps?
    //     loaderOptions: {
   
    //         css: {
   }, // 这里的选项会传递给 css-loader
    //         postcss: {
   } // 这里的选项会传递给 postcss-loader
    //     }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
    //     modules: false // 启用 CSS modules for all css / pre-processor files.
    // },
    // webpack配置
    chainWebpack: (config) => {
   
    },
    configureWebpack: {
   

    },
    // webpack-dev-server配置有些值像 host、port 和 https 可能会被命令行参数覆写。
    devServer: {
   
        open: process.platform === 'darwin',
        host: '0.0.0.0', // 允许外部ip访问
        port: 8022, // 端口
        https: false, // 启用https
        overlay: {
   
            warnings: true,
            errors: true
        },
        proxy: {
   
            '/api': {
   
                target: ''