本人喜欢用vue cli创建项目，但大家都知道Vue CLI 3 开始 Webpack 配置就被封装到 vue.config.js 中了，并且项目中默认是没有vue.config.js文件的，如果我要进行Webpack 配置就得先添加一个vue.config.js，然后一项一项的进行初始化。那么vue cli为什么不再暴露原生 Webpack 配置文件？
如果经历过较长时间的 Vue CLI 2 项目，你大概能遇到「模板升级」的问题。一个工程通过模板初始化好后，工程配置部分就基本固定了。当这个模板升级带来了更优秀的工程配置，你就要面对如何引入新配置的难题。重新初始化项目，太肉疼；对比新旧模板差异并手动引入，太心累。总之就是很恼人。Vue CLI 3 放弃模板转向插件，就是希望能通过动态生成的方式解决这个问题。插件升级，你无需再关心哪里有变化、要如何引入到现有工程，你需要做的只是升级插件依赖的版本（预期 Vue CLI 4 甚至可以帮你升级你的业务代码）。但实现这一效果的前提就是 Webpack 配置由 Vue CLI（及各种插件）来管理操控。举一个简单的例子：原本 webpack.config.js 在 /build 下的，你出于某种原因移到了工程根目录，Vue CLI 要如何跟踪并更新配置呢？ 一切的抉择都是取舍。
那么怎么配置一个vue.config.js文件？
1.添加vue.config.js
直接在package.json的同级目录下添加vue.config.js
2.初始化vue.config.js
const path = require(‘path‘) module.exports = { publicPath: ‘./‘, // 基本路径 outputDir: ‘dist‘, // 输出文件目录 lintOnSave: true, // eslint-loader 是否在保存的时候检查 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md // webpack配置 chainWebpack: (config) => { // 以下相当于webpack的module配置 // config.module // .rule(‘ant-design-vue‘) // .test(/(\.jsx|\.js)$/) // .include // .add(path.join(__dirname, ‘./node_modules/ant-design-vue‘)) // .add(path.join(__dirname, ‘./node_modules/ant-design-vue/es/icon‘)) // .end() // .use(‘babel‘) // .loader(‘babel-loader‘) }, configureWebpack: (config) => { if (process.env.NODE_ENV === ‘production‘) { // 为生产环境修改配置... config.mode = ‘production‘ } else { // 为开发环境修改配置... config.mode = ‘development‘ } // Object.assign(config, { // // 开发生产共同配置 // resolve: { // alias: { // ‘@‘: path.resolve(__dirname, ‘./src‘), // ‘@c‘: path.resolve(__dirname, ‘./src/components‘), // ‘@p‘: path.resolve(__dirname, ‘./src/views‘), // ‘@m‘: path.resolve(__dirname, ‘./node_modules‘) // } // 别名配置 // } // }) }, productionSourceMap: false, // 生产环境是否生成 sourceMap 文件 // css相关配置 css: { extract: true, // 是否使用css分离插件 ExtractTextPlugin sourceMap: false, // 开启 CSS source maps? loaderOptions: { css: {}, // 这里的选项会传递给 css-loader less: { // http://lesscss.org/usage/#less-options-strict-units `Global Variables` // `primary` is global variables fields name globalVars: { primary: ‘#fff‘ } } }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions modules: false // 启用 CSS modules for all css / pre-processor files. }, parallel: require(‘os‘).cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。 pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa // webpack-dev-server 相关配置 devServer: { open: process.platform === ‘darwin‘, host: ‘‘, // 允许外部ip访问 port: 8080, // 端口 https: false, // 启用https overlay: { warnings: true, errors: true }, // 错误、警告在页面弹出 proxy: ‘http://localhost:8080‘ // 以下是详细的Proxy配置 // proxy: { // ‘/api‘: { // target: ‘http://www.baidu.com/api‘, // changeOrigin: true, // 允许websockets跨域 // // ws: true, // pathRewrite: { // ‘^/api‘: ‘‘ // } // } // } // 代理转发配置，用于调试环境 }, // 第三方插件配置 pluginOptions: { } }
如果是一个新创建的项目，直接复制粘贴应该就可以运行了。
要是看注释不过瘾，请去看看官网的介绍：https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE