Configuración del entorno de la interfaz

• Se requieren diferentes configuraciones para las diferentes etapas de desarrollo y lanzamiento

• Diferentes métodos de dominio cruzado, diferentes configuraciones

• Al empaquetar, inyecte los parámetros ambientales de manera uniforme, gestione el entorno de manera uniforme y genere paquetes de diferentes versiones

  • Cree un nuevo archivo env.js en el directorio scr para configurar diferentes entornos y usar diferentes parámetros

    let baseURL
    // 在node中有一个process.env.NODE_ENV进程，可以取到环境变量中的参数
    switch (process.env.NODE_ENV) {
            
            
      case 'development':
        baseURL = 'http://dev-xx-xxx.com/api'
        break
      case 'test':
        baseURL = 'http://test-xx-xxx.com/api'
        break
      case 'production':
        baseURL = 'http://xx-xxx.com/api'
        break
      default:
        baseURL = 'http://xx-xxx.com/api'
        break
    }
    
    export default {
            
            
      baseURL
    }
    

    • Hay un proceso process.env.NODE_ENV en el nodo, que puede tomar los parámetros en la variable de entorno
    • CORS cross-domain y jsonp cross-domain pueden usar esta configuración

  • Agregue el paquete de prueba, el paquete en línea y el entorno de ejecución local requerido en el archivo package.json

    "scripts": {
            
            
        "serve": "vue-cli-service serve --mode=development",
        "test": "vue-cli-service build --mode=test",
        "build": "vue-cli-service build --mode=production",
        "lint": "vue-cli-service lint"
      },
    

    • --Mode = Los siguientes parámetros no se pueden escribir a voluntad y se informará un error si escribe al azar

  • Finalmente, necesita importar el archivo env.js en main.js

    import env from './env'
    
    // 根据前端的跨域方式做调整
    axios.defaults.baseURL = '/api'
    // 根据环境变量获取不同的请求地址
    axios.defaults.baseURL = env.baseURL
    // 超时处理
    axios.defaults.timeout = 8000