feat: svg和图片资源配置

package.json

@@ -48,6 +48,7 @@
     "scss": "^0.2.4",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^2.0.6"
   }
 }

src/components/HelloWorld.vue

@@ -1,22 +1,22 @@
 <template>
-  <div>{{ val }}</div>
+  <div>
+    <div class="bbb">{{ val }}</div>
+    <img :src="Tom" />
+    <SvgIcon :name="'snow'" :size="20" />
+  </div>
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
+import Tom from "@assets/img/tom.jpg";
 const val = ref<number>(300);
 </script>
 <style scoped lang="scss">
 .read-the-docs {
   color: #888;
 }
-.aaa {
-  border: 1px solid red;
-  .bbb {
-    color: $primary-color;
-    user-select: none;
-    width: 200px;
-    padding: 10px;
-    position: absolute;
-  }
+.bbb {
+  user-select: none;
+  width: 200px;
+  padding: 10px;
 }
 </style>

src/components/SvgIcon/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <svg
+    aria-hidden="true"
+    :class="svgClass"
+    :style="{
+      color: color,
+      fill: color,
+      width: iconSize,
+      height: iconSize
+    }"
+    v-bind="$attrs"
+  >
+    <use :xlink:href="iconName" :fill="color" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+defineOptions({ name: "SvgIcon" });
+const props = defineProps({
+  name: {
+    type: String,
+    default: ""
+  },
+  color: {
+    type: String,
+    default: ""
+  },
+  size: {
+    type: [Number, String],
+    default: 15
+  }
+});
+
+// 判断传入的值，是否带有单位，如果没有，就默认用px单位
+const getUnitValue = (value: string | number): string | number => {
+  return /(px|em|rem|%)$/.test(value.toString()) ? value : value + "px";
+};
+
+// svg大小
+const iconSize = computed<string | number>(() => {
+  return getUnitValue(props.size);
+});
+
+// svg名称-对应资源文件夹的svg名称
+const iconName = computed<string>(() => `#icon-${props.name}`);
+
+// svg动态类名
+const svgClass = computed<string>(() => {
+  if (props.name) return `svg-icon icon-${props.name}`;
+  return "svg-icon";
+});
+</script>
+
+<style lang="scss" scope>
+.svg-icon {
+  width: auto;
+  height: auto;
+  vertical-align: middle;
+  flex-shrink: 0;
+}
+</style>

src/main.ts

@@ -1,5 +1,9 @@
 import { createApp } from "vue";
 import "./style.css";
 import App from "./App.vue";
+import "virtual:svg-icons-register";
+import SvgIcon from "./components/SvgIcon/index.vue"; // 全局svg图标组件
 
-createApp(App).mount("#app");
+const app = createApp(App);
+app.component("SvgIcon", SvgIcon);
+app.mount("#app");

vite.config.ts

@@ -2,11 +2,25 @@ import { defineConfig, normalizePath } from "vite";
 import vue from "@vitejs/plugin-vue";
 import path from "path";
 import postcssPresetEnv from "postcss-preset-env";
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 const variablePath = normalizePath(path.normalize("./src/style/variable.scss"));
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    createSvgIconsPlugin({
+      // 配置src下存放svg的路径，这里表示在src/icons文件夹下
+      iconDirs: [path.resolve(process.cwd(), "src/icons")],
+      symbolId: "icon-[dir]-[name]"
+    })
+  ],
+  resolve: {
+    // 配置别名
+    alias: {
+      "@assets": path.join(__dirname, "src/assets")
+    }
+  },
   css: {
     postcss: {
       plugins: [postcssPresetEnv()]
@@ -17,5 +31,30 @@ export default defineConfig({
         additionalData: `@import "${variablePath}";`
       }
     }
+  },
+  build: {
+    outDir: "dist", // 指定打包路径，默认为项目根目录下的dist目录
+    assetsInlineLimit: 4 * 1024, // 打包内联阈值4kb
+    chunkSizeWarningLimit: 2000, // 规定触发警告的 chunk 大小, 消除打包大小超过500kb警告
+    // minify: "esbuild", // esbuild 打包更快，但是不能去除 console.log，terser打包慢，但能去除 console.log
+    minify: "terser", // Vite 2.6.x 以上需要配置 minify："terser"，terserOptions才能生效，terser可以去除 console.log
+    terserOptions: {
+      compress: {
+        keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
+        drop_console: true, // 生产环境去除 console
+        drop_debugger: true // 生产环境去除 debugger
+      },
+      format: {
+        comments: false // 删除注释
+      }
+    },
+    // 静态资源打包到dist下的不同目录,将文件类型css、js、jpg等文件分开存储
+    rollupOptions: {
+      output: {
+        chunkFileNames: "static/js/[name]-[hash].js",
+        entryFileNames: "static/js/[name]-[hash].js",
+        assetFileNames: "static/[ext]/[name]-[hash].[ext]"
+      }
+    }
   }
 });