环境变量
通常项目会处于很多不同环境，其中包含三个最基本的环境：
- 开发环境
- 测试环境
- 生产环境若你想了解更多关于 vite 具体如何配置环境变量，可点此查看
注意：
.env文件只能放在根目录下，否则 vite 无法读取.env文件内容
在本文中作为示例只创建这三种基本的环境：
- 为不同的环境创建
.env文件，如下：
- 在
package.json修改对应的命令，如下：
- 为了支持对 自定义环境编变量 的友好提示，需要在
env.d.ts文件中添加对应的 ImportMeta 接口
interface ImportMetaEnv { readonly VITE_API_ENV: string } // eslint-disable-next-line no-unused-vars interface ImportMeta { readonly env: ImportMetaEnv } 复制代码
通过在 App.vue 中进行测试，import.meta.env.VITE_API_ENV 进行获取环境变量的值，结果如下：
集成 vue-router
具体实现请看源码配置，以下是简述：
- 通过
npm install vue-router@4安装符合 Vue3 版本的 Vue Router - 创建 router 文件夹，其中 index.ts 为统一的入口文件，routes 目录存放不同的模块路由
- 创建 pages 文件夹，存放页面相关的内容，可引入到 routes 中充当展示组件
- 定义基本路由，如配置 Home 页的重定向、NotFound 页面 等
测试效果如下：
集成 pinia
具体实现请看源码配置，以下是简述：
- 通过
npm install pinia安装 pinia - 在
src目录下创建store目录用来存放 state、actions、gette 等模块
- 创建一个 pinia（根存储）并将其传递给应用程序，如：
import { createPinia } from 'pinia' app.use(createPinia()) 复制代码
测试效果如下：
封装 axios
关于 axios 的 class 封装已经有很多的文章都讲得很细了，这里使用 函数式 进行二次封装，具体实现请看源码配置，以下是简述：
- 通过
npm i axios安装 axios - 在
src目录下创建utils目录用于提供自定义工具模块方法，同时在其目录下请求模块创建request目录存放二次封装的axios
request目录下封装常用的方法包含get、post、upload、download等
如下是使用 apifox 模拟接口，得到的测试结果：
集成 element-plus
具体实现请看源码配置，以下是简述：
- 通过
npm install element-plus --save安装element-plus - 实现 按需加载，通过
npm install -D unplugin-vue-components unplugin-auto-import对应插件并在vite.config.ts中进行配置
如下是使用 element-plus 组件的效果：
生产构建
在生产构建的过程中，仍然有些你需要注意的内容：
- 修改
package.json中的scripts脚本命令，添加vite build命令进行生产构建，如：
"scripts": { ... "test": "vue-tsc --noEmit && vite build --mode test", "build": "vue-tsc --noEmit && vite build --mode prod" ... } 复制代码
- 将
tsconfig.json中的isolatedModules选项默认为true， 现在需要将其修改为false，否则在打包过程中会包如下错误:
- 将
tsconfig.json中的noImplicitAny选项默认为true，现在需要将其修改为false，否则在你引入自定义文件模块时可能无法通过 ts 编译: 
- 为了将打包后的
js和css文件生成多个chunk，需要对cssCodeSplit和rollupOptions进行配置，具体配置请看源码，否则会被打包成一个文件，如下：
从脚本命令来看，当我们执行 npm run build 时，实际执行的是 vue-tsc --noEmit && vite build --mode prod，其中最先执行的就是 vue-tsc 即有关 vue 的 typescript 的编译，意味着这个阶段我们必须要保证和 ts 相关的内容都不能有异常，否则打包阶段必然无法通过。
最后
从基本项目结构一步步 “添砖加瓦” 到相对完善了项目的内容（虽然还得继续完善），其中有不少的坑得踩，但为了填坑又不得不去找各种文档资料来解决问题，时间上也许开销比较大，但这也能填充自己知识的空白或模糊区域，亦是一种收获知识的方式。
