从 16 个方向逐步搭建基于 Vue3 的前端架构，前端程序员架构之路该如何继续学习

Vite 天然支持引入 .ts 文件。

这里对 tsconfig.json 做了一些修改：

{

“compilerOptions”: {

“types”: [“vite/client”],

“baseUrl”: “src”,

“paths”: {

“@/“: [”./”]

}

},

“exclude”: [“node_modules”]

}

在初期使用 typeScript 的时候，很多人都很喜欢使用 any 类型，把 typeScript 写成了 anyScript ，虽然使用起来很方便，但是这就失去了 typeScript 的类型检查意义了，当然写类型的习惯是需要慢慢去养成的，不用急于一时。

4.配置环境变量

---

vite 提供了两种模式：具有开发服务器的开发模式（development）和生产模式（production）。

这里我们可以建立 4 个 .env 文件，一个通用配置和三种环境：开发、测试、生产。

4.1 配置模式

NODE_ENV=development # 开发模式

NODE_ENV=production # 生产模式

• .env 通用配置，我个人喜欢把他当作项目的配置文件，例如项目的 title，此文件不对应任何模式。

• .env.development 开发环境，使用 development 模式。

• .env.staging 测试环境，因为要部署到测试服务器，或本地使用 serve 命令预览，所以使用 production 模式。

• .env.production 生产环境，因为要部署到测试服务器，或本地使用 serve 命令预览，所以使用 production 模式。

package.json 内 script 需要增加 staging 命令

“script”: {

“build”: “vue-tsc --noEmit && vite build”,

“staging”: “vue-tsc --noEmit && vite build --mode staging”,

“serve”: “vite preview --host”

}

4.2 常用的环境变量

推荐使用以下常见的三个变量：

• VITE_APP_BASE_URL

接口请求地址。

通常后端会区分三种环境，部署在不同的地址下。

• VITE_APP_STATIC_URL

静态资源地址。

静态资源我是不建议你直接放在项目中，这会导致项目仓库变得巨大。

本地开发和测试环境我会选在使用本地搭建的静态资源服务器，你可以找后端运维的同学帮你搭建，或者你使用 http-server 在本地启动一个服务器也可以。生产环境建议上传至 OSS。

• VITE_PUBLIC_PATH

构建资源公共路径。

这个与 vue/cli 中的 publicPath 同理，有的时候你构建的项目并不是存放在跟路径下，例如 http://ip:port/{项目名}。

4.3 封装静态资源文件

如果你配置了 VITE_APP_STATIC_URL 静态资源环境变量，那么你需要封装以下两个东西：

• 根据环境返回实际的资源地址函数。

• 方便使用的静态资源组件。

baseStaticUrl.ts

// 处理静态资源链接

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({