关于使用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，采用独立样式文件载入，不采用<style>方式内联至html文件中
      sourceMap: false, // 是否在构建样式地图，false将提高构建速度
      loaderOptions: { // css预设器配置项
          
      }
  },
  parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
  pluginOptions: { // 第三方插件配置
      definePlugin
  },
  pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  },
  devServer: {
      open: true,
      host: '0.0.0.0',
      port: 8080,
      https: false,
      hotOnly: false,
      proxy: null,
      // proxy: {
      //     '/api': {
      //         target: '<url>',
      //         ws: true,
      //         changOrigin: true
      //     }
      // },
      before: app => { }
  }
}

---

我需要打包三种环境下的代码，生成对应的打包文件，dev,beta,prod,上面的代码添加在根目录下你自己新创建的vue.config.js文件，当然，你也可以根据自己的实际情况来做另外的修改，除此之外还需要修改package.json文件里面的内容

"build-dev": "vue-cli-service build --mode dev",
"build-beta": "vue-cli-service build --mode beta",
"build-prod": "vue-cli-service build --mode prod"

分别对应三种不同的环境，不过我这里不同的是，没有跟其他人一样创建.env.文件名文件，但是不影响打包以后资源文件的路径和API接口的主路径。

文笔不好，cli3也只是初步运用，有哪里写的不好的地方请指正，与君共勉！