从 16 个方向逐步搭建基于 Vue3 的前端架构，前端工作经验6年

export default function baseStaticUrl(src = ‘’) {

const { VITE_APP_STATIC_URL } = import.meta.env;

if (src) {

return ${VITE_APP_STATIC_URL}${src};

}

return VITE_APP_STATIC_URL as string;

}

静态资源组件

静态资源主要有图片、音频和视频三种常见的形式。

• 通过 src 写入相对的路径，使用上述的函数来补全完整的路径，即可在不同的环境下使用不同地址的静态资源。

• 通过 type 传入图片、音频和视频的类型。

• autoplay 是解决以视频为背景的情况下，视频无法自动播放的问题。

4.4 封装 SVG 的图标组件

svg 图标比较小，而且都是可读的 xml 文本，所以我们把它直接放在项目中即可，通过 vite-plugin-svg-icons 插件，实现自动引入 svg 图标。

配置 vite.config.ts：

plugins: [

viteSvgIcons({

iconDirs: [resolve(process.cwd(), ‘src/assets/icons’)],

symbolId: ‘icon-[dir]-[name]’,

}),

]

封装一个 vue 组件：

首先将下载的 .svg 图标放入 @/assets/icons 文件夹下

• name 放置在 @/assets/icons 文件夹下的文件名。

• color 颜色填充，使用此项会默认覆盖图标颜色。

5.按需自动引入组件

---

unplugin-vue-components[10] 是一款非常强大的插件（极力推荐），核心功能就是帮助你自动按需引入组件，Tree-shakable，只注册你使用的组件。这里说一下他的两个核心使用方式和配置方式。

此插件不仅支持 vue3，同时也支持 vue2，并且支持 Vite、Webpack、Vue CLI、Rollup。

5.1 安装与配置

安装：

npm i unplugin-vue-components -D

配置：

// vite.config.ts

import Components from ‘unplugin-vue-components/vite’

export default defineConfig({

plugins: [

Components({ /* options */ }),

],

})

这里的 options 可以配置一些选项，后面提到的组件库注册会使用到。

5.2 改变全局组件注册方式

我们通常将全局的组件封装在 @/src/components 中，然后通过 app.component() 注册全局组件。使用此插件后，无需手写注册，直接在模板中使用组件即可：

这里引入官方的示例：

自动编译为：

5.3 自动引入组件库

在使用组件库时，常规组件我们也会注册到全局，如果使用局部注册由于页面中会使用到多个组件，会非常麻烦，所以这个功能绝佳，例如我们使用 ant-design-vue 组件库。

直接在模板中使用即可，无需手动注册或局部引用：

按钮

当然，你还需要在 vite 中引入它的解析器：

import Components from ‘unplugin-vue-components/vite’

import { AntDesignVueResolver } from ‘unplugin-vue-components/resolvers’

export default defineConfig({

plugins: [

Components({

resolvers: [

AntDesignVueResolver(),

]

})

],

})

目前支持的解析器，根据你的喜好去选择：

• Ant Design Vue[11]

• Element Plus[12]

• Element UI[13]

• Headless UI[14]

• IDux[15]

• Naive UI[16]

• Prime Vue[17]

• Vant[18]

• VEUI[19]