Vite中使用 svg-sprite-loader

Posted 2023-04-18

参考技术A 本文默认你们了解过 SVG，如果不懂会去 iconfont 下也行。

大家在使用 Vue-Cli 的时候，想要使用SVG， svg-sprite-loader 绝对是个火热的插件，它用相对优雅的方式帮我们解决了引入 SVG 文件的问题。

到了 Vite 上，由于不再使用 webpack 进行打包， svg-sprite-loader 不再可用，svg的插件又回到了百花齐放的阶段，其中最火的 vite-sprite-loader ，但是他不支持 Sprite 技术（这里要提一下，关于 Sprite 可以看 未来必热：SVG Sprite技术介绍 ），对于开发UI库或公用上不太友好。

现有我开发UI库的要全面去 webpack ，所以在 SVG 碰到了一些问题，遂写了相应的 Rollup 插件（Vite就是基于Rollup打包），地址如下：

rollup-plugin-svg-sprites

并不是造轮子，是看过其他相关的项目，都没有特别符合需求的。

注：如果单独使用rollup来编译，则需要单独引入 @rollup/plugin-commonjs ，因为插件的核心是基于 svg-baker 和 svg-baker-runtime , 跟 svg-sprite-loader 一样的，这两个没有es的实现。

以上单组件的使用方式，这点跟 vite-sprite-loader 的使用方式一致。

相信也有人尝试 react + vite 的组合，插件同样支持以 JSX 的形式返回。

注：

以我在写的UI库为例子（安装省略）：

注意：由于这里用到了 require.context ，这是 webpack 带的，rollup 需要借助插件。

之所以先编译好，是因为在 Vite 不太推荐使用 require.context ，如果是一个个引入的，那不要先编译。

第2步，单个引用icons， ./src/load-svg.js :

第3步，在 Vue 单页面中：

这里就可以明显的看到使用的是 Sprite 这种方式。

我们将svg封装成一个独立组件 SvgIcon.vue ：

在其他组件中，就可以愉快的使用整批 icons：

欢迎大家使用该插件，如果使用中遇到什么问题欢迎提交 issues ，静候佳音。

如何在 vite.config.js 中使用 Vite 环境变量？

【中文标题】如何在 vite.config.js 中使用 Vite 环境变量？

【英文标题】：How can I use Vite env variables in vite.config.js?

【发布时间】：2021-05-29 00:35:27

【问题描述】：

在我的 Vite 项目中使用以下.env：

# To prevent accidentally leaking env variables to the client, only
# variables prefixed with VITE_ are exposed to your Vite-processed code

VITE_NAME=Wheatgrass
VITE_PORT=8080

如何在我的vite.config.js 中使用VITE_PORT？

【参考方案1】：

您可以加载app level 环境变量并将它们添加到Node level 环境变量：

import  defineConfig, loadEnv  from 'vite';
import vue from '@vitejs/plugin-vue';


export default ( mode ) => 
    process.env = ...process.env, ...loadEnv(mode, process.cwd());

    // import.meta.env.VITE_NAME available here with: process.env.VITE_NAME
    // import.meta.env.VITE_PORT available here with: process.env.VITE_PORT

    return defineConfig(
        plugins: [vue()],

        server: 
            port: process.env.VITE_PORT,
        ,
    );

【讨论】：

如果上述方法对您不起作用（例如，您想导入一个不以 VITE_ 为前缀的变量。试试这个：process.env = ...process.env, ...loadEnv(mode, process.cwd(), '') ; 前缀（第三个参数）确实会有所不同.