环境变量

通常项目会处于很多不同环境，其中包含三个最基本的环境：

• 开发环境
• 测试环境
• 生产环境若你想了解更多关于 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 相关的内容都不能有异常，否则打包阶段必然无法通过。

最后

从基本项目结构一步步 “添砖加瓦” 到相对完善了项目的内容（虽然还得继续完善），其中有不少的坑得踩，但为了填坑又不得不去找各种文档资料来解决问题，时间上也许开销比较大，但这也能填充自己知识的空白或模糊区域，亦是一种收获知识的方式。