vite（下） | 任先生的笔记库

# 一、模式和环境变量

# 1、环境变量

在 vue-cli 中，代码无论在什么阶段，都是需要进行统一 Bundle 的，会用到 node 环境，所以环境变量可以直接放在系统变量 process 上

知识回顾

我们可以使用process.env来获取当前系统中定义的所有环境变量。

常见的有：process.env.NODE_ENV、process.env.BASE_URL


`NODE_ENV`	当前应用程序所处的环境	如 development、production 等。

`BASE_URL`	生产环境时所在的 URL 的基础路径	在 Vue CLI 2 中，BASE_URL 的默认值是 /，在 Vue CLI 3 中，BASE_URL 的默认值是根据 vue.config.js 文件中的 publicPath 选项自动生成的。
`VUE_APP_*`	Vue CLI 中的自定义环境变量	在应用程序中可以使用 `process.env.VUE_APP_*`来访问这些变量

| PUBLIC_URL | 静态资源（如图片、字体等）的基础 URL | Create React App 项目中的一个环境变量 |

而 vite 在开发环境中，无需打包操作，可快速的冷启动，所以只能换种思路将环境变量放在 import.meta 上（并且 vite 是通过 rollop 进行打包的）

官方：环境变量和模式 (opens new window)


`MODE`	当前应用程序所处的环境	如 development、production 等（在 vite 中我们可以通过`import.meta.env.PROD`、`import.meta.env.DEV`来确定所处环境）。

`BASE_URL`	生产环境时所在的 URL 的基础路径	在 Vite 中，BASE_URL 的默认值是根据 vite.config.js 文件中的 base 选项（默认值：/）自动生成的。

那上面的这些环境变量有什么应用场景吗（后面会讲到的）？

# 2、base 值

在 vite 生成的项目中，如果设置了 base 选项，那么在应用中，可以使用 import.meta.env.BASE_URL 代替 vue router@4 中的 base 选项的值。

// vue router@4中
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

// 静态资源中
<img src="${import.meta.env.BASE_URL}/assets/logo.png" />

并且我们在设置 base 选项时，还可以使用import.meta.env.MODE来区分生产环境

base 存在的意义

base 并不是必填项。但当我们的应用程序部署到一个非域名根路径的子路径上时，默认的绝对路径'/'会导致项目的路由、静态资源找不到。

module.exports = defineConfig({
  // base: '/'
  // base: import.meta.env.MODE === 'production' ? '/my-app/' : '/' // 绝对路径
  base: import.meta.env.MODE === 'production' ? './' : '/' // 相对路径 👏
})

# 3、配置文件

除此之外，我们还可以创建像.env.[MODE] 类似的文件用于存放不同环境下的环境变量

.env

开发、生产环境都可以用

VITE_NAME = 'lencamo'

.env.production

生产环境可用

生产环境中的 VITE_BASE_API 为什么不用加 ip 地址

生产环境下的 VITE_BASE_API 仅仅是一个后端接口标识，Nginx 会利用该标识代理到真正的后端接口地址 https://api.example.com/api

# just a flag
ENV = 'production'

# base api
VITE_BASE_API = '/prod-api'

应用：axios 请求基地址 baseURL

环境配置

# .env.development
VITE_BASE_API = /api # 使用项目自身 webpack-dev-serve 的Mock接口
VITE_BASE_API = http://localhost:3000/api # 使用本地后端接口
VITE_BASE_API = https://api.example.com/api # 使用服务器线上接口

# .env.production
VITE_BASE_API = /prod-api # 后端接口标识

axios 实例

import axios from 'axios'

// 以前
// let BASE_URL = ''
// if (import.meta.env.MODE === 'production') {
//   BASE_URL = 'http://localhost:8080/api'
// } else {
//   BASE_RUL = 'http://localhost:8080/api'
// }

// const request = axios.create({
//   baseURL: BASE_URL
//   // ……
// })

// 现在
const request = axios.create({
  baseURL: import.meta.env.VITE_BASE_API
  // ……
})

# 二、性能优化

# 1、按需引入

在 vite 中要实现对现有组件库的按需自动导入组件：

unplugin-vue-components (opens new window)、unplugin-auto-import (opens new window)

以 antdV 为例：

// vite.config.js
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    // plugin installation
    Components({
      resolvers: [AntDesignVueResolver()]
    })
  ]
})

需要注意的是，一般反馈类组件（如：Message 消息提示、Loading 加载等）仍然是需要手动引入的。

这些反馈类组件的样式引入可以使用 vite-plugin-style-import (opens new window)

// 样式引入
import 'element-plus/theme-chalk/el-message.css'

// 使用组件
import { ElMessage } from 'element-plus'

# 2、svg 处理

参考：

https://juejin.cn/post/6854573215646875655

解决方案：

vue-element-admin (opens new window)：采用的是 svg-sprite-loader (opens new window)
Vben-Admin-admin (opens new window)：采用的是vite-plugin-svg-icons (opens new window)

vite-plugin-svg-icons 是另一个比较好用的 Vite 插件，它可以自动将 SVG 图标转换成 Vue 组件，并且支持按需引入。

视频讲解 (opens new window)

← vite（上）【前端架构模式】 →