关于使用Vue-cli3配置vue.config.js的一些心得

网上关于cli3中vue.config.js的配置有很多，能满足各种需要。我根据网上的一些文章摘要了一些内容，然后结合自己实际中项目的实际使用情况，来写一些这个文章，也给后来者一些启发，更是方便自己以后查阅。

先直接上代码

---

//vue.config.js
const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
const webpack = require('webpack')

let env = process.argv[4];
console.log(process.argv)
console.log('---------------------')
console.log(process.argv[4])
//如果不携带参数则默认prod生产环境
if (['dev', 'beta', 'prod'].indexOf(env) < 0) {
  env = 'prod';
}
let api_root = ''; //网址名称
let baseURI = ''; //CDN路径
switch (process.argv[4]) {
  case undefined || 'undefined':
      api_root = "http://www.baidu.com/";
      baseURI = 'http://www.baidu.com/';
      break;
  case 'dev':
      api_root = "http://www.baidu.com/";
      baseURI = 'http://www.baidu.com/';
      break;
  case 'beta':
      api_root = "http://www.baidu.com/";
      baseURI = 'http://www.baidu.com/';
      break;
  case 'prod':
      api_root = "http://www.baidu.com/";
      baseURI = 'http://www.baidu.com/';
      break;
  default:
      break;
}

//插件用于在全局获取路径或其他
var definePlugin = new webpack.DefinePlugin({
  API_ROOT: JSON.stringify(api_root),
});
module.exports = {
  publicPath: baseURI, // 根域上下文目录，原baseURI
  outputDir: env, // 构建输出目录
  assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
  lintOnSave: false, // 是否开启eslint保存检测，有效值：ture | false | 'error'
  runtimeCompiler: true, // 运行时版本是否需要编译
  transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
  productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
  css: { // 配置高于chainWebpack中关于css loader的配置
      // modules: true, // 是否开启支持‘foo.module.css’样式
      // extract: true, // 是否使用css分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用