vue.config.js配置，公司实战项目

在vue-cli3.0后，就把vue-cli2.x中build、config目录下的配置，需要在vue.config.js中配置了
vue-cli3.x、vue-cli4.x刚搭建是没有vue.config.js文件的，需要自己手动创建
下面展示实战项目的配置，主要有以下几个功能：
1、打包生产的目录格式
2、开发环境ip地址配置
3、代码热更新
4、解决跨越，反向代理的使用
5、css样式配置
6、使用terser-webpack-plugin，来清除打包后清除console.log输出，防止本地开发时，调试忘记清除控制台输出
7、内部引入文件时，设置指定字段的别名（简写），如默认的src就是@
等等…
现在我把在公司vue.cli4.x搭的项目vue.config.js配置，给大家参考参考，都写了注释哦

const path = require('path')
const resolve = (dir) => path.join(__dirname, dir)
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
     
  publicPath: '/', // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
  outputDir: 'dist', // 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
  assetsDir: 'static', // 放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
  indexPath: 'index.html', // 指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
  // lintOnSave: true, // 是否在保存的时候lint检查
  productionSourceMap: true, // 生产环境是否生成 sourceMap 文件
  // 开发环境服务配置，ip地址、代理等
  devServer: {
     
    host: '0.0.0.0',
    port: 8088,
    https: false,
    hotOnly: false,
    hot: true, // 更改代码热更新
    open: false, //配置自动启动浏览器
    // 反向代理
    proxy: {
     
      // 凡是请求接口前缀带'/api'的都使用此代理
      '/api': {
     
        target: 'http://localhost:9000/', // 请求地址应为后端的接口地址，每个人不一样，需配置
        changeOrigin: true, // needed for virtual hosted sites
        // ws: true, // proxy websockets
        // pathRewrite: {
     
        //   '^/api': ''
        // }
      },
    },
  },
  css: {
     
    extract: false, // 开启会影响样式热更新 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false, // 开启 CSS source maps
    loaderOptions: {
     
      // css预设器配置项，编译后，渲染到全局样式上
      /* // 给 sass-loader 传递选项
            sass: {
              // @/ 是 src/ 的别名
              prependData: `@import "~@/views/About.scss";`
            } */
    },
  },
  configureWebpack: {
     
    optimization: {
     
      minimizer: [
        new TerserPlugin({
     
          // 生产环境中清掉console
          terserOptions: {
     
            ecma: undefined,
            warnings: false,
            parse: {
     },
            compress: {
     
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ['console.log'], // 移除console
            },
          },
        }),
      ],
    },
  },
  //是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
  chainWebpack: (config) => {
     
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('utils', resolve('src/utils'))
      .set('api', resolve('src/api'))
  },
  //是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  parallel: require('os').cpus().length > 1,
  // 向 PWA 插件传递选项。https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {
     },
  pluginOptions: {
     
    // 第三方插件配置
    // ...
  },
}

以上都是一下基础配置，如您需要更多配置请上官网，链接: https://cli.vuejs.org/zh/config/#vue-config-js

希望本文的内容可以帮助到大家！