vue-cli 和 vite 全局变量定义和使用

vue-cli

vue.config.js

// 第一步，在 vue.config.js 中定义
// 注意：定义的变量必须是 APP_ 开头。 这是 vue-cli 的硬性规范。
process.env.APP_VERSION = require('./package.json').version
process.env.APP_LAST_UPDATE_TIME = (new Date).toLocaleString()

main.js

// 第二布，在 main.js 中打印使用
window.APP_VERSION = process.env.APP_VERSION
window.APP_LAST_UPDATE_TIME = process.env.APP_LAST_UPDATE_TIME
console.log(`当前版本: ${window.APP_VERSION}, 最后更新时间：${window.APP_LAST_UPDATE_TIME}`)

 

Vite

vite.config.js

// 第一步，在 vite.config.js 中定义 deinfe 配置
// 在 vite.config 配置变量不需要遵循 vue-cli 中强制的 APP_ 开头的命名规范。
export default ({ command, mode }) => {
    console.log('vite config: ', command, mode)

    return {
        base: '/dls-dpp/',
        // define global var
        define: {
            // fix "path" module issue
            'process.platform': null,
            'process.version': null,
            // 字符串配置必须用 JSON.stringify()
            LAST_UPDATE_TIME: JSON.stringify((new Date).toLocaleString()),
            // 也支持配置对象
            GLOBAL_VAR: { test: 'i am global var from vite.config.js define' },
        },
    }
}

main.ts

// 第二步，在 main.ts 中打印使用
console.log('LAST_UPDATE_TIME', window.LAST_UPDATE_TIME)

// （可选）如果在 Typescript 要使用 window 全局变量，必须在代码中声明才行。 一般定义在 global.d.ts 中
declare global {
    interface Window {
        $cachePending: any
    }
}