vue 多项目配置

需求

1. 一个项目中配置多个项目
2. 它们的差异性，网站 logo、api地址、title、部分组件页面差异
3. 它们之间的差异性不是很大，用多分支切换项目成本太高，维护起来不方便

场景

启动项目时读取不同的配置 eg：npm run serve --project=projecaName --env=test

通过命令行输入参数，注册到应用的环境变量中，应用读取环境变量的值，区分不同的项目

npm 获取参数

获取参数

// 获取通过 npm 运行拿到 --project --env 参数
const project = process.env.npm_config_project
const env = process.env.npm_config_env

注册到 vue 应用中

vue.config.js

const path = require('path')
const webpack = require('webpack')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
    // 设置别名
    config.resolve.alias
    .set('@project', resolve('project/' + process.env.npm_config_project)) //根据启动不同的项目，读取不同的配置
    
    // 配置环境变量
    config
      .plugin('define')
      .tap(args => {
        args[0]['process.APP_CONFIG'] = JSON.stringify({ project: project, env: env })
        return args
      })
}

在项目中添加 project 文件夹

该文件夹下放着不同项目的配置

const config = { 
    host: {
        test: '',
        prod: ''
    }
    // ...
}

按照自己特定的需求添加配置

通过别名引入配置improt project form '@project'

读取注入的环境变量，配置不同的 host

process.APP_CONFIG

let baseUrl = ''
// 运行 npm 命令手动挂载的配置 APP_CONFIG
switch (process.APP_CONFIG.env) {
  case 'test':
    baseUrl = project.host.testUrl
    break
  case 'pre':
    baseUrl = project.host.preUrl
    break
  case 'prod':
    baseUrl = project.host.prodUrl
    break
}
const perfix = '/api/v1'