首页 > 其他分享 >vue-cli 和 vite 全局变量定义和使用

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

时间:2022-12-14 14:24:10浏览次数:49  
标签:vue LAST cli APP UPDATE js 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
    }
}

 

标签:vue,LAST,cli,APP,UPDATE,js,vite
From: https://www.cnblogs.com/CyLee/p/16981910.html

相关文章

  • vue serve 部署 步骤说明
    1.构建镜像dockerbuild-t镜像名称:镜像TAG--build-argURL=http://localhost:8081--build-argPORT=2000--build-argSSL_PORT=443-fDockerfile.如果......
  • 项目引入fastclick 导致ios中input需要多次点击才能触发focus
    main.js中引入之后的修改importFastClickfrom"fastclick";FastClick.prototype.focus=function(targetElement){letlength;if(targetElement.setSelect......
  • 实现一个可拖拽的div(vue3写法)
    constchatbox=ref();constdragx=(el)=>{letoDiv=chatbox.value;//当前元素letdisX=el.clientX-oDiv.offsetLeft;letdisY=el.clientY-oDi......
  • vue查漏补缺
    1.动态参数属性::[]<div:[atrr]="width:100%"></div><script>exportdefault{data:()=>({attrr:’class‘})}</script>......
  • vue3组件el-dialog提取
    父组件:1<template>2<divclass="auto-wrap">3<divclass="content-left">45<el-form:model="addReportForm"label-width="120px">......
  • Vue笔记5--生命周期
    生命周期钩子​ 因为只是为了给毕设做前端,我选择理解即可。但是其实整个Vue的精髓就在整个地方。有时间可以看看尚硅谷相关教程的生命周期部分p48-p52https://www.bilibi......
  • vuex的使用-简单存储
    在写新项目的时候,用input写了个搜索框,搜索之后获取到点击的数据,要将数据在tab中渲染出来,我思前想后,还是觉得vuex是最好的解决办法,记录一下vuex的基本用法首先是在store文......
  • vue+vant移动端制作一个可添加的form提交表单
    <template><van-nav-bartitle="填写参会人员信息"left-text="返回"left-arrow@click-left="onClickLeft"/><!--添加参会人员信息-->......
  • 报错:fastclick.js?fe3c:446 [Intervention] Unable to preventDefault inside passive
    报错:fastclick.js?fe3c:446[Intervention]UnabletopreventDefaultinsidepassiveeventlistenerduetotargetbeingtreatedaspassive.Seehttps://www.chromes......
  • Vuex极速入门
    01、什么是Vuex?1.1、为什么需要状态管理?在复杂的系统中,我们会把系统按照业务逻辑拆分为多个层次、多个模块,采用组件式的开发方式。而此时不同模块、父子模块之间的通信......