vue通过配置计算属性projectName实现一套代码多个项目

前端工作中，经常需要多个项目复用同一套代码逻辑。比如后台系统的列表，调用的是同一个接口获取列表，但是项目展示的列表项不同；移动端H5某个页面，使用的是同一套js代码，但是每个项目需要一套单独的html和样式……如何实现项目区分呢？

一、使用

直接先来看在代码中的使用：

后台管理系统项目区分：

 <!-- 只有projectName为hn的项目才展示‘所属区县’列表项： -->
<el-table-column align="center" label="所属区县" prop="districtName" v-if="projectName=='hn'"></el-table-column>

 <!-- 不同projectName展示列表项label不同： -->
<el-table-column :label="projectName == 'js' ? '机构名称' : '公司名称'" align="center" prop="name" />

移动端多个项目复用js逻辑，独立html和css：

<!-- 主页面：my/index.vue -->
<template>
  <div>
    <hnIndex v-if="projectName == 'hn'"/>
    <hbIndex v-if="projectName == 'hb'"/>
    <zjIndex v-if="projectName == 'zj'"/>
  </div>
</template>
<script>
import hnIndex from "./components/hn-myIndex.vue"
import hbIndex from "./components/hb-myIndex.vue"
import zjIndex from "./components/zj-myIndex.vue"
export default {
  components:{
    hnIndex,
    hbIndex,
    zjIndex,
  }
};
</script>

<!-- 复用的js文件：my/myIndex.js -->
export default {
    //代码逻辑
    data(){
        return {}
    },
    created(){},
    methods:{}，
}
//如果想每个项目的name不同，可以：
function init(name){
    return {
        name:name,
        data(){
            return {}
        },
        created(){},
        methods:{}，
    }
}
export default init


<!-- 单独的项目组件：my/components/hn-myIndex.vue -->
<template>
  <div>
    <!-- html代码 -->
  </div>
</template>
<script>
  import hn from '../myIndex.js'
  export default {
     ...hn
  }
  //需要不同name的情况：
  import init from '../myIndex.js'
  export default init('hnIndex')
</script>
<style lang='scss' scoped>
  <!-- css代码 -->
</style>

也可以在js代码中使用，方便不同项目处理不同逻辑：

if (this.projectName == 'hb') {
    //代码逻辑，如接口请求
}

二、实现方式

1. projectConfig.json 全局项目配置文件

2. project.js 注入配置文件

3. main.js 配置projectName计算属性，通过this.projectName判断不同项目

1.配置全局的 projectConfig.json文件

// public/projectConfig.json
{
    "projectName":"hn",
    "projects":[
        {
            "projectName":"hn",
            "title": "河南项目"
        },
        {
            "projectName":"hb",
            "title": "河北项目"
        },
        {
            "projectName":"js",
            "title": "江苏项目"
        },
        {
            "projectName":"zj",
            "title": "浙江项目"
        },
    ]
}

2. project.js 注入配置文件

// project.js
import store from './store'
// 测试环境取当前url包含的项目名
if(import.meta.env.VITE_APP_ENV == 'staging'){
    let project = '';
    if(location.host.includes('hn')){
        project = 'hn'
    }else if(location.host.includes('hb')){
        project = 'hb'
    }else if(location.host.includes('js')){
        project = 'js'
    }else if(location.host.includes('zj')){
        project = 'zj'
    }
    //将当前projectName存入store
    store.dispatch('app/setProjectName', project)

//开发环境直接取projectConfig.json中的projectName
//使用时直接手动改变projectConfig.json中对象当前的projectName即可
}else if(import.meta.env.VITE_APP_ENV === 'development'){
    fetch('/projectConfig.json').then((res) => {return res.json(); })
    .then((data)=>{
        data.projects.forEach((item)=>{
            if(item.projectName === data.projectName){
                store.dispatch('app/setProjectName', item.projectName)
            }
        })
    })
}

app.js中的储存：

//app.js
const state = {}
const actions = {
    setProjectName({ commit }, projectName){
        state.projectName = projectName
      },
}

3.main.js 配置projectName计算属性

//main.js
Vue.mixin({
    computed:{
      projectName(){    
          if(PROJECT_NAME) return PROJECT_NAME //用于生产环境       
          return this.$store.state.app.projectName; //用于开发和测试环境
      },
    }
}

//生产环境PROJECT_NAME的设置
//1.package.json文件中进行npm脚本配置
"scripts": {
    "build:hn": "cross-env PROJECT_NAME=hn vite build",
    "build:hb": "cross-env PROJECT_NAME=hb vite build",
    "build:js": "cross-env PROJECT_NAME=js vite build",
    "build:zj": "cross-env PROJECT_NAME=zj vite build",
}
//2.配置文件vite.config.js中注入模板并全局定义常量
export default defineConfig(({ mode, command }) => {
    const env = loadEnv(mode, process.cwd(), '')
    const { VITE_APP_ENV, VITE_APP_BASE_API, PROJECT_NAME } = env
    plugins.push(createHtmlPlugin({
      minify: false,
      entry: 'src/main.js',
      template: 'index.html',
      inject: {
        data: {
          PROJECT_NAME: PROJECT_NAME || 'all'
        },
      }
    }))
    return {
        define: {
          PROJECT_NAME: JSON.stringify(PROJECT_NAME),
        },
    }
})

此时就可以全局使用projectName了