vue.config.js配置属性[新鲜出炉]

因为新版的vue-cli已经没有了config这个文件，所以需要我们手动创建然后才能去配置。
首先在项目根目录创建vue.config.js文件
具体配置项如下

module.exports = {
    // 配置基本路径     ===  webpack的output.publicPath
    // 可以根据当前开发环境进行区分
    publicPath:process.env.NODE_ENV === "production"?"./":"./",
    outputDir:"dist",               // 输出文件目录
    assetsDir:"assets",             // 放置静态资源的目录 相对于output
    indexPath:"index.html",         // 指定生成的 index.html 的输出路径 (相对于 outputDir)
    filenameHashing:true,           // 生成的静态资源文件名是否包括哈希值  默认为true，如果你的index.html不是cli生成的可以设置为false来关闭
    pages:{                         // 多页面开发需要
        index:{
            // page入口
            entry:"src/index.main.js",
            // 模板来源
            template:"./public/index.html",
            // 在 dist/index.html 的输出
            filename:"index.html",
            // 当使用 title 选项时，
            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'Index Page',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // 当使用只有入口的字符串格式时，
        // 模板会被推导为 `public/subpage.html`
        // 并且如果找不到的话，就回退到 `public/index.html`。
        // 输出文件名会被推导为 `subpage.html`。
        subpage: 'src/subpage/main.js'
    },
    // 是否开启代码通过eslint-loader代码检测  可选类型boolean | 'warning' | 'default' | 'error'
    // 使用前需要安装时配置代码检测
    lintOnSave:false,
    // 是否使用包含运行时编译器的vue构建版本  
    // 如果为true的话就可以在vue组建中舒勇template选项
    // 但是应用会额外增大10kb左右
    // runtimeCompiler:false,
    // 默认bable-loader会忽略所有node_modules中文件，如果想要通过babel显示转译一个依赖
    // 可以在数组中列出
    // transpileDependenciesz:[],
    productionSourceMap:false,      // 是否生成.map文件  不生成可以加快打包速度
    // 调整webpack配置  可以是一个对象或者函数
    configureWebpack: {
        // 插件使用需要下载并导入  这里是示例
        plugins: [
          new MyAwesomeWebpackPlugin()
        ]
      },
    configureWebpack:(config)=>{
        if (process.env.NODE_ENV === 'production') {
            config.mode = 'production'          // 为生产环境修改配置
        } else {
            config.mode = 'development'         // 为开发环境修改配置
        }
    },
    // 接收一个基于 webpack-chain 的 ChainableConfig 实例。
    // 允许对内部的 webpack 配置进行更细粒度的修改
    chainWebpack:(config)=>{
        console.log(config);
    },
    css:{
        requireModuleExtension:false,            // 匹配所有的css文件
        // 数据类型可选Boolean | object
        // 生产环境下是 true，开发环境下是 false
        // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 
        // (而不是动态注入到 JavaScript 中的 inline 代码)。
        extract:false,
        sourceMap:false,             // 是否生成.map文件  不生成可以加快打包速度
        // 使用前要先安装对应的loader
        /* loaderOptions:{
            css:{
                // 这里的选项会传递给 css-loader
            },
            postcss:{
                // 这里的选项会传递给 postcss-loader
            }
            // ...  另外支持的还有sass-loader less-loader stylus-loader
        } */
    },
    // 支持webpack-dev-server的所有选项
    devServer:{
        port:8000,                  // 端口号，如果端口号被占用，会自动提升1
        host:"localhost",           // 修改主机名
        https:false,                // 是否开启http协议
        open:true,                  // 是否自动打开页面
        // 代理解决跨域
        // 如果你的前端应用和后端 API 服务器没有运行在同一个主机上
        // 你需要在开发环境下将 API 请求代理到 API 服务器
        // 这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
        // 完整配置项可以查阅https://github.com/chimurai/http-proxy-middleware#proxycontext-config
        proxy:{
            // 下面代码意思是：如果访问http://localhost:8081/dev-api/info
            // 则通过代理访问到http://localhost:8080/dev-api/info
            // 然后我们将匹配的请求头设置为空
            // 这时候真正的地址就是http://localhost:8080/info
            "dev-api":{
                // 代理访问
                target:"http://localhost:8080",
                ws:true,
                // 开启代理
                changOrigin:true,
                // 将请求头移除
                pathRewrite:{
                    "^/dev-api":"",
                }
                // 可以配置多个端口的跨域...
            }
        },
    },
    pluginOptions:{
        foo:{
            // 配置第三方插件
        }
    }
}
// 更多官方配置项地址：https://cli.vuejs.org/zh/config/#vue-config-js