npm install fast-glob --save 在vite.config.js配置 import{ defineConfig }from'vite'importvuefrom'@vitejs/plugin-vue'import{createSvgIconsPlugin}from'vite-plugin-svg-icons';importpathfrom'path'function resolve(dir) {returnpath.join(__dirname, dir) }// https://vitejs.dev/config/export default...
npm install vite-plugin-svg-icons -D 2. 在vite.config.js中引入并配置vite-plugin-svg-icons 接下来,在vite.config.js文件中引入vite-plugin-svg-icons插件并进行配置。假设你的SVG图标存放在src/assets/svg目录下,配置如下: javascript import { defineConfig } from 'vite'; import vue from '@vitejs/...
1.安装依赖:npm install vite-plugin-svg-icons -D 2.vite.config.ts 中配置: import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'//在export default ({ command, mode }: ConfigEnv): UserConfig中的plugins数组中添加代码plugins: [ createSvgIconsPlugin({//指定需要缓存的图标文件夹,地址可...
npm i vite-plugin-svg-icons -D 2. 新建文件夹 src/assets/icons/svg来存放svg 图片 3.新建组件src/components/SvgIcon/index.vue <template><svg:style="{width, height}"><use:xlink:href="prefix + name":fill="color"></use></svg></template>defineProps({ //前缀 prefix: { type: String, ...
npm i vite-plugin-svg-icons-D// 或者yarn add vite-plugin-svg-icons-D 1. 2. 3. 二、在main.js引入 import'virtual:svg-icons-register' 1. 三、配置SVG图片文件夹 四、在vite.config.js中配置 //import path,{ resolve } from 'path'importpathfrom'path'import{createSvgIconsPlugin}from 'vite-...
npm i vite-plugin-restart -D 配置:vite.config.js import ViteRestart from 'vite-plugin-restart' export default { plugins: [ ViteRestart({ restart: [ 'vite.config.js', ] }) ], }; unplugin-vue-components 组件自动按需导入 安装:
- [unplugin-vue-components](https://www.npmjs.com/package/unplugin-vue-components) auto importing for common components - Eslint - Prettier - Alias `@` to `<project_root>/src` - mock use [msw](https://mswjs.io/) - Mock use [msw](https://mswjs.io/) - `npx msw init ./publi...
本地运行并打包成功,在服务器上报错,打开package.json查看依赖的版本号: vite-plugin-svg-icons版本号被修改了,此版本过低导致报错。 原因是服务器上的npm没有装淘宝镜像。 解决: 安装淘宝npm(cnpm) npm install -g cnpm --registry=https://registry.npm.taobao.org 再重新安装依赖,成功啦~...