# vite-var

> vite-var

Latest version **2.0.12** (published 2025-07-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-var
pnpm add vite-var
yarn add vite-var
bun add vite-var
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.12 |
| Published | 2025-07-02 |
| First published | 2023-01-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 1518079148@qq.com |
| Maintainers | a1518079148 |
| Keywords | typescript, tools, vite-tools, vite, vue3 |

## Links

- npm: https://www.npmjs.com/package/vite-var
- Repository: https://gitee.com/veigarchen/vite-var
- Homepage: https://gitee.com/veigarchen
- npm.io page: https://npm.io/package/vite-var

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 2.0.12 (latest) — 2025-07-02
- 2.0.11 — 2025-05-26
- 2.0.10 — 2025-02-24
- 2.0.9 — 2025-01-17
- 2.0.8 — 2024-12-17
- 2.0.7 — 2024-07-24
- 2.0.6 — 2024-07-24
- 2.0.5 — 2024-07-11
- 2.0.4 — 2024-07-11
- 2.0.3 — 2024-05-29
- 2.0.2 — 2024-05-29
- 1.5.0 — 2024-03-08
- 2.0.1 — 2024-01-20
- 2.0.0 — 2024-01-20
- 1.0.11 — 2023-07-17
- … 11 more at https://npm.io/package/vite-var/versions

## README

# vite-var

vite便捷工具集，作者邮箱：1518079148@qq.com

> 开源地址：https://gitee.com/veigarchen/vite-var
> 
> 安装使用：npm i vite-var -D 或 pnpm i vite-var -D 或 cnpm i vite-var -D 等。。。

## 1、全局变量写入替换
vite项目全局变量替换，理论上可以用在所有文件

* vite项目全局配置，可用于less，vue，index.html文件中
* @param obj 配置对象（如：{title:"标题",runtime:{pc:"电脑"}}）
* @param 使用方法 如：#{title}、#{runtime}、#{runtime.pc}
* @param 注意 当对象作为变量时显示的是json字符串

vite.config.ts
```
import { viteVar } from 'vite-var'
export default defineConfig(({ command, mode }) => {
    return {
        plugins:[
            viteVar({
                title:'标题',
                runtime:{
                    pc:'电脑',
                    pe:'手机'
                }
            }),
            ...其他插件
        ],
        ...其他配置
    }
}
```
.ts文件使用例子
```
//运行后： const pc = '电脑'
const pc = '#{runtime.pc}'
//运行后： const runtime = JSON.parse('{ pc:'电脑', pe:'手机' }')
const runtime = JSON.parse('#{runtime}')
```
.vue文件使用例子
```
<template>
    <!-- 运行后：<p>标题-手机</p> -->
    <p>#{title}-{{ pe }}</p>
</template>
<script lang="ts" setup>
const pe = '#{runtime.pe}'
</script>
```


## 2、设置代理
 * 设置代理，只对项目地址的代理，如/api、/images等，对其他http地址不起作用
vite.config.ts
```
import { viteProxy } from 'vite-var'
export default defineConfig(({ command, mode }) => {
    return {
        server:[
            proxy: viteProxy({
                '/api': 'http://192.168.1.101:30004'
            })
            ...其他配置
        ],
        ...其他配置
    }
}
```

## 3、条件编译
 * 按环境条件执行代码
 * @param mode 当前模式（如：dev、build等自定义环境名称）
 * @param 使用方法1 <!-- #if-dev -->代码<!-- end -->
 * @param 使用方法2 // #if-dev 代码 // #end
 * @param 注意 功能是基于注释语法实现，仅支持html和js注释语法


vite.config.ts
```
import { viteDef } from 'vite-var'
export default defineConfig(({ command, mode }) => {
    return {
        plugins:[
            viteDef(mode),
            ...其他插件
        ],
        ...其他配置
    }
}
```
main.ts文件
```
//#ifdef build
import 'axios'
//#endif
import 'vue3_ts_tool'
//#ifdef android
import 'okhttp'
//#endif
```
> 当npm run build时执行import 'axios',删除import 'okhttp'，保留import 'vue3_ts_tool'
> 
> 当npm run android时执行import 'okhttp',删除import 'axios'，保留import 'vue3_ts_tool'
> 
> 其他文件类型vue，less等文件同理

如App.vue文件示例
```
<template>
    <!-- #if-dev -->
    <div>开发环境可以看到我</div>
    <!-- end -->
    <!-- #if-build -->
    <div>生产环境可以看到我</div>
    <!-- end -->
</template>

---
_Source: https://npm.io/package/vite-var · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._