vite-var

vite便捷工具集，作者邮箱：[email protected]

开源地址：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 代码
• @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>