加载中...
  • umi之define属性

    含义:

    用于提供给项目全局中可用的常量,每个页面都可使用

    例:

    在跟目录.umirc文件里进行配置 define

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    import { defineConfig } from 'umi';

    export default defineConfig({
    nodeModulesTransform: {
    type: 'none',
    },
    routes: [
    { path: '/', component: '@/pages/index' }
    ],
    fastRefresh: {},

    // DefinePlugin全局常量
    define:{
    'stateDemo':'1000'
    }
    });

    页面中的使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    import styles from './index.less';
    import React, { Component } from 'react'

    export default class index extends Component{

    // 在生命周期里进行打印
    componentDidMount(){
    console.log(stateDemo)
    }

    render(){
    return (
    <div>
    <h1 className={styles.title}>Page index</h1>
    </div>
    );
    }
    }

    在控制台查看
    RP9RRP.png

    问题:tsx中报错提示找不到stateDemo名称

    在网上找到了2种解决方案,我这里第二种方式解决了

    解决方法:

    1. 使用完整引用:process.env.stateDemo
    2. 全局声明 FOO:在 typings.d.ts 文件中,添加 declare const stateDemo: string // string 是 FOO 的数据类型,如果类型不定,直接写成 any 吧
      如:
      RP9hM8.png

    这样就可以完美使用了

    上一篇:
    ./node_modules/taro-ui/dist/h5/components/accordion/index.js
    下一篇:
    umijs qiankun 初体验
    本文目录
    本文目录