taro中使用defineConstants定义环境变量

在根目录下的config/dev.js或者dev.ts以及config/prod.js或者prod.ts中的defineConstants字段下定义，主要是需要用JSON.stringify()包一下

当然，dev文件下定义的和prod文件下定义的可以不一样的，分别对应开发和打包环境

dev.js | dev.ts

// dev.js | dev.ts
module.exports = {
  env: {
    NODE_ENV: '"development"'
  },
  defineConstants: {
    // 主要的是看这里
    H5_URL: JSON.stringify("http://www.constblog.com")
  },
  compiler: {
    type: "webpack5",
    prebundle: {
      enable: false,
    }
  },
  mini: {
    hot: true,
    debugReact: true
  },
  h5: {}
}

prod.js | prod.ts

// prod.js | prod.ts
module.exports = {
  env: {
    NODE_ENV: '"production"'
  },

  defineConstants: {
    // 主要的是看这里
    H5_URL: JSON.stringify("http://www.baidu.com")
  },
  mini: {},
  h5: {
  }
}

如果使用的是typescript的话还需要在根目录types/global.d.ts里边声明一下

/// <reference types="@tarojs/taro" />

declare module '*.png';
declare module '*.gif';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.svg';
declare module '*.css';
declare module '*.less';
declare module '*.scss';
declare module '*.sass';
declare module '*.styl';

declare namespace NodeJS {
  interface ProcessEnv {
    TARO_ENV: 'weapp' | 'swan' | 'alipay' | 'h5' | 'rn' | 'tt' | 'quickapp' | 'qq' | 'jd'
  }
}
//在这里声明一下全局变量
declare const H5_URL: string;

然后在项目文件中使用

export default function Index() {
    const previewUrl = `${H5_URL}/preview`
    // 可以直接使用
    return (<View>{H5_URL}</View>)
}