多人协作避免vue.config.js文件冲突----vue项目改造

先看文件夹目录：重点是config文件夹下的配置，.gitignore，vue.config.js文件

要把vue项目跟后台对接接口api单独提出来，首先对vue.config.js进行改造：把proxy单独提出来
vue.config.js:

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
const proxy = require('./config/proxy/index.js')//这一行是重点

function resolve(dir) {
  return path.join(__dirname, dir)
}
const name = defaultSettings.title // 网址标题
const port = 8013 // 端口配置
module.exports = {
  // hash 模式下可使用
  // publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: false,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: proxy//这一行是重点
  },
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src'),
        '@crud': resolve('src/components/Crud')
      }
    }
  },
  chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()
    config
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )
    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // only package third parties that are initially dependent
                },
                elementUI: {
                  name: 'chunk-elementUI', // split elementUI into a single package
                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
          config.optimization.runtimeChunk('single')
        }
      )
  },
  transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ]
}

config/proxy/index.js:

const fs = require('fs')
const getFileUrl = fileName => `./config/proxy/${fileName}`
const LOCAL_FILE_NAME = 'proxy.dev.local.js'//本地配置文件名称
// 本地的开发环境变量配置文件，属于gitignore
const localFileUrl = getFileUrl(LOCAL_FILE_NAME)

// 默认请求
const apiHost = {
  rewrite: process.env.VUE_APP_BASE_API,
  target: 'http://192.xxx.xxx.xxx:8080'
}
let proxyList = []

function getProxies(PROXY_LIST = []) {
  const res = {}
  PROXY_LIST.forEach(proxyItem => {
    let source = proxyItem.rewrite
    if (source && source.charAt(source.length - 1) === '/') {
      source = source.substring(0, source.length - 1)
    }
    res[source] = {
      target: proxyItem.target,
      changeOrigin: true,
      pathRewrite: {
        ['^' + source]: ''
      }
    }
  })
  return res
}
// 核心代码，通过模板（proxy.dev.tpl）创建自己本地的配置文件
// 本地的开发配置文件不存在，则创建并初始化为空的
if (!fs.existsSync(localFileUrl)) {
  fs.copyFile(getFileUrl('proxy.dev.tpl'), localFileUrl, err => {
    const isFail = !!err

    console.warn(`\n[${isFail ? 'warn' : 'info'}]config/proxy.js: 创建${localFileUrl}${isFail ? `失败，${err.stack}` : '成功'}`)
  })
  proxyList.push(apiHost)
} else {
  // 当存在时获取proxy配置
  proxyList = require(`./${LOCAL_FILE_NAME}`)
}

const proxy = getProxies(proxyList)

module.exports = proxy

config/proxy/proxy.dev.tpl:
模板：

const proxyList = [
  {
    rewrite: process.env.VUE_APP_BASE_API,
    target: 'http://192.xxx.xxx.xxx:8080'
  }
]
module.exports = proxyList

第一次运行，创建下边的文件，该文件是自己本地的配置文件，每个人拥有自己的配置文件，该文件不会被提交，不会有代码冲突

.gitignore文件：提交的时候不提交自己本地使用的配置文件