vite项目初始化之~环境变量

插件推荐： xuwu(虚无)模板助手

介绍

本文介绍的是xuwu模版助手中的 扩展环境变量 这个模块相关代码，还会陆续更新相关的其他功能，比如ajax请求模版，生产环境去掉console，eslint+commit代码时统一风格，移动端consoleLog控制台，移动端适配，ElementUi，VantUi，AntDesignUi的按需引入等。

环境变量文件添加

在项目的跟目录创建 .env.pre,.env.test,.env.prod三个文件

//预发布
//.env.pre
VITE_API_ENV=pre

//线上环境
//.env.prod
VITE_API_ENV=prod

//测试环境
//.env.test
VITE_API_ENV=test

package.json文件配置

增加测试环境，线上环境，预发布的本地和打包环境

"scripts": {
    "build": "vue-tsc --noEmit && vite build",
    "build_pre": "vite build --mode=pre",
    "build_prod": "vite build --mode=prod",
    "build_test": "vite build --mode=test",
    "dev": "vite",
    "preview": "vite preview",
    "serve_pre": "vite serve --mode=pre",
    "serve_prod": "vite serve --mode=prod",
    "serve_test": "vite serve --mode=test"
  },

vite.config.ts文件配置

import { defineConfig, loadEnv } from 'vite'
function baseUrl({ mode, command }) {
  const env = loadEnv(mode, __dirname)
  let base = './'
  if (command === 'build' && env.VITE_API_ENV === 'test') {
    base = 'https://www.baidu_test.com'
  } else if (command === 'build' && env.VITE_API_ENV === 'prod') {
    base = 'https://www.baidu.com'
  } else if (command === 'build' && env.VITE_API_ENV === 'pre') {
    base = 'https://www.baidu_pre.com'
  } else {
    base = './'
  }
  return base
}

export default defineConfig(({ mode, command }) => ({
  base: baseUrl({ mode, command })
}))