从0到1，带你搭建Vite+Vue3+Pinia+Naive UI后台（二） - 配置篇（上）

前言

没有前言，接上一篇直接开始

配置篇

配置篇分上中下三部分，本篇主要介绍环境配置 + vite配置

1. 环境配置 + vite配置
2. 插件配置
3. eslint+prettier配置

环境配置

在根目录下新建三个文件，.env, .env.development, .env.production

.env

VITE_APP_TITLE = 'Admin'

VITE_PORT = 3100
复制代码

.env.development

# 资源公共路径,需要以 /开头和结尾
VITE_PUBLIC_PATH = '/'

# proxy
VITE_PROXY = [["/api","http://localhost:8080"]]
复制代码

.env.production

# 资源公共路径,需要以 /开头和结尾
VITE_PUBLIC_PATH = '/'
复制代码

在vite项目中，以VITE_ 为前缀的环境变量可以通过 import.meta.env.xxx的方式访问，.env文件的环境变量会在所有环境中加载，但是优先级更低，会被当前模式下的同名变量覆盖

但是，在node环境中（如vite.config.js文件），并不能通过import.meta.env.xxx这种方式使用环境变量，但我们却有这样的需求，因此我们需要处理一下，让node环境也可以使用我们定义的环境变量

第一步：在根目录下新建build/utils.js

build/utils.js

export function wrapperEnv(envOptions) {
  if (!envOptions) return {}
  const rst = {}

  for (const key in envOptions) {
    let val = envOptions[key]
    if (['true', 'false'].includes(val)) {
      val = val === 'true'
    }
    if (['VITE_PORT'].includes(key)) {
      val = +val
    }
    if (key === 'VITE_PROXY' && val) {
      try {
        val = JSON.parse(val.replace(/'/g, '"'))
      } catch (error) {
        val = ''
      }
    }
    rst[key] = val
    if (typeof key === &