[Vue]多系统环境配置

大致需求

需要实现一套代码运行与打包多个平台，还能通过dist文件夹内部的config.js文件进行打包配置修改系统与对应后端接口。

配置说明(以两个系统平台为准)

1. 两个development环境配置
2. 一个production环境配置
3. package.json文件配置
4. router路由配置
5. request请求配置
6. config.js系统配置

development开发环境配置

1.在src文件路劲下直接创建两个自定义开发环境配置

2.内部需要配置一个系统标题与系统对应的后端接口

production生产环境配置

1. 创建一个.env.prod文件
   

2. 内容可以不放东西，只是作为一个打包渠道文件，你也可以就使用默认的env.production文件，对应默认的build。但是还是建议将自己的环境区分出来，方便后续内容更改。

打包与预览文件创建

1.如果你的项目里面没有build文件夹，就创建一个build文件夹下面创建一个index.js文件用来配置preview

2.配置内容 针对预览env.prod文件，以你自己的生产文件为准

const { execSync } = require(‘child_process’);
const args = require(‘minimist’)(process.argv.slice(2));
const isPreview = args.preview;
if (isPreview) {
execSync(vue-cli-service serve --mode prod, { stdio: ‘inherit’ });
}

package.json文件配置,放在scripts下

“build:prod”: “vue-cli-service build --mode prod”,
“dev-demo1”: “vue-cli-service serve --mode dev-demo1”,
“dev-demo2”: “vue-cli-service serve --mode dev-demo2”,
“preview”: “node build/index.js --preview”,

router配置思路

编写两个fucntion 分别控制路由的隐藏与默认路由的配置

> const isHidden = (envName)=>{
  if(process.env.NODE_ENV=== "production'){
    /* 生产环境 */
    return  envName === config.ENV ? false : true;
  }else{
    /* 开发环境 */
    return  envName === process.env.VUE_APP_TITLE?false:true;
  }
};
const homeRoute = ()=>{
  let envName = '';
  if(process.env.NODE_ENV=== "production'){
    envName = config.ENV;
  }else{
    envName = process.env.VUE_APP_TITLE;
  }
    if(envName === 'demo1'){
    return  {
      path:'/',
      redirect: "/",
      component:Layout,
      children:[{
        path:'',
        name:'Demo1',
        component:()=>import("@/views/demo1/index"),
        meta:{
          title:"DEMO1",
          iconClass: [],
          key: "/Demo1",
  
        }
      }],
      hidden:isHidden('demo1')
    };
  }

再将homerute方法在配置的路由中调用就行了。

config.js文件配置

1.再public文件夹下创建一个config.js文件,并在下方写入对应的系统名称与后端接口路径

window.globalConfig = {
    ENV: 'demo1', // 默认环境，可以在部署时修改
    API_BASE_URL: {
  		demo1:'xxx:xxx:xxx:xxxx',
  		demo2:'xxx:xxx:xxx:xxxx'
    },
  };

2.在index.html文件中引入config.js文件

   <script src="<%= BASE_URL %>config.js"></script>

3.在src文件夹下创建一个config.js文件，其中defaultConfig配置表示如果全局配置失效的情况下的配置

const defaultConfig = {
  ENV: 'becon',
  API_BASE_URL: {
  	demo1:'xxx:xxx:xxx:xxxx',
  	demo2:'xxx:xxx:xxx:xxxx'
  }
};
const globalConfig = window.globalConfig || {};
export default {
  ENV: globalConfig.ENV || defaultConfig.ENV,
  API_BASE_URL: globalConfig.API_BASE_URL ? globalConfig.API_BASE_URL[globalConfig.ENV] : defaultConfig.API_BASE_URL[defaultConfig.ENV],
  // 其他配置...
};

request请求配置,在你的request请求的js文件中引入src下的config.js文件

大概就是生产环境就通过conifg配置系统和接口，开发环境就通过对应的.env配置文件来控制系统和后端接口

import config from '@/config'; // 导入配置文件
if(process.env.NODE_ENV=== "production'){
  baseURL = config.API_BASE_URL;
} else {
  baseURL = process.env.VUE_APP_BASE_API;
}