使用vue-cli3创建项目，如何配置vue-config.js

在使用vue-cli3创建项目后，因为webpack的配置均被隐藏了，当你需要覆盖原有的配置时，则需要在项目的根目录下，新建vue.config.js文件，来配置新的配置。

vue-cli 3 与 2 版本有很大区别

• vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3
  的项目架构完全抛弃了 vue-cli 2 的原有架构，3 的设计更加抽象和简洁（此处后续可以详细介绍）
• vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
• vue-cli 3 的设计原则是“0配置”
• vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化

由于 vue-cli 3 也学习了 rollup 的零配置思路，所以项目初始化后，没有了以前熟悉的 build 目录，也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。

那么，我们该如何去配置自己的项目了？

其实这一切都是因为 vue-cli 3 的项目初始化，帮开发者已经解决了 80% ，甚至绝大部分情形下的 webpack 配置。

上述功能就是由 @vue/cli-service 依赖去处理，当你打开 node_modules 目录下 @vue 中的 cli-service 看一眼，是不是找到了熟悉的感觉？

配置的相关字段
需要在项目根目录下手动新建一个 vue.config.js，此处参考我提供的一个基础模板

vue.config.js会被自动加载：

module.exports = {
   
    //选项
    //基本路径
    publicPath = process.env.NODE_ENV === 'production' ? './' : '/',
    //构建时的输出目录
    outputDir = 'dist',
    //设置静态资源的目录
    assetsDir: 'static',
    //html的输出路径
    indexPath: 'index.html',
    //文件名哈希
    filenameHashing: true,
    //用于多页配置，默认是undefined
    pages: {
   
        //page的入口文件
        entry: 'src/index/main.js',
        //模板文件
        template: 'public/index.html',
        //在dist/index.html的输出文件
        filename: 'index.html',
        // 当使用页面 title 选项时，
        // template 中的 title 标签需要是 <title