uniapp多环境配置

多环境配置文件创建

在项目根目录下创建不同环境的配置文件，例如：

• env.dev.js 开发环境
• env.test.js 测试环境
• env.prod.js 生产环境

每个文件导出对应环境的配置对象：

// env.dev.js
module.exports = {
  BASE_URL: 'https://dev.example.com',
  API_KEY: 'dev_key_123'
}

动态加载环境配置

在main.js中根据运行环境加载对应配置：

const env = process.env.NODE_ENV || 'development'
const config = require(`./env.${env}.js`)

Vue.prototype.$config = config

package.json脚本配置

在package.json中配置不同环境的运行命令：

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development uni",
    "test": "cross-env NODE_ENV=test uni",
    "build:prod": "cross-env NODE_ENV=production uni build"
  }
}

条件编译处理

使用uni-app的条件编译处理环境差异：

// #ifdef H5
console.log('H5平台特定代码')
// #endif

// #ifdef MP-WEIXIN
console.log('微信小程序特定代码')
// #endif

环境变量使用示例

在组件或页面中访问环境变量：

export default {
  methods: {
    fetchData() {
      const url = this.$config.BASE_URL + '/api/data'
      // 发起请求...
    }
  }
}

跨平台适配方案

针对不同平台的环境差异，可创建平台适配层：

// utils/platform.js
function getPlatformConfig() {
  // #ifdef H5
  return { baseURL: 'https://h5.example.com' }
  // #endif

  // #ifdef MP-WEIXIN
  return { baseURL: 'https://mp.example.com' }
  // #endif
}

注意事项

• 敏感信息不应直接存储在配置文件中
• 生产环境配置需要单独管理
• 不同环境的API地址可能需要处理跨域问题
• 测试环境配置应尽可能接近生产环境