# 一、模式和环境变量

# 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.PRODimport.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

解决方案:

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

视频讲解 (opens new window)

更新于 : 7/8/2024, 10:21:14 AM