在不同的文件里面配置不同的环境变量，可以让我们的配置更加容易维护和使用，这里我们说下vite配置环境变量和模式是怎么配置的。
Vite 在一个特殊的 import.meta.env 对象上暴露环境变量，官网上的东西咱这里就不抄了，O(∩_∩)O哈哈~
我们这里直接说怎么做的，毕竟官网上没有实际使用的例子，在下在实际使用的时候还遇到点问题，当然也可以说是自己没用对吧。

package.json里面的scripts修改，增加多个环境模式，如：

  "scripts": {
    "dev": "vite serve --mode development",
    "test": "vite serve --mode test",
    "ppe": "vite serve --mode ppe",
    "prod": "vite serve --mode production",
    "build:dev": "vue-tsc --noEmit && vite build --mode development",
    "build:test": "vue-tsc --noEmit && vite build --mode test",
    "build:ppe": "vue-tsc --noEmit && vite build --mode ppe",
    "build:prod": "vue-tsc --noEmit && vite build --mode production",
    "serve": "vite preview"
在项目目录下增加环境变量的文件，如：
 .env.development
 
# 开发环境变量 
VITE_APP_TITLE=记账簿development
.env.test
 
# 质控环境变量 
VITE_APP_TITLE=记账簿test
 
.env.ppe
 
# 灰度环境变量 
VITE_APP_TITLE=记账簿ppe
 
.env.production
 
# 生产环境变量 
VITE_APP_TITLE=记账簿
 
在vue里面使用，比如：
 
console.log('VITE_APP_TITLE:' + import.meta.env.VITE_APP_TITLE);
 
这里面有个问题需要注意，就是字符串里面不能直接用import.meta.env.的方式使用，不然打包的时候会报错，可以用’import.meta\u200b.env.VITE_APP_TITLE’的方式使用，这个其实在官网上有说到，不过没怎么用到的话时间一长就容易忘了，贴下报错信息，方便后面复查：
 
D:\study\gitee\study\vite2vue3study>npm run build:prod
> vite2vue3study@0.0.0 build:prod D:\study\gitee\study\vite2vue3study
> vue-tsc --noEmit && vite build --mode production
vite v2.5.5 building for production...
✓ 16 modules transformed.
[rollup-plugin-dynamic-import-variables] Unexpected token (12:18)
file: D:/study/gitee/study/vite2vue3study/src/views/About.vue?vue&type=script&lang.ts:12:18
error during build:
SyntaxError: Unexpected token (12:18)
    at Parser.pp$4.raise (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16958:13)
    at Parser.pp.unexpected (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:14466:8)
    at Parser.pp.expect (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:14460:26)
    at Parser.pp$3.parseExprList (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16827:12)
    at Parser.pp$3.parseSubscript (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16192:25)
    at Parser.pp$3.parseSubscripts (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16149:24)
    at Parser.pp$3.parseExprSubscripts (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16133:21)
    at Parser.pp$3.parseMaybeUnary (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16096:17)
    at Parser.pp$3.parseExprOps (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16029:19)
    at Parser.pp$3.parseMaybeConditional (D:\study\gitee\study\vite2vue3study\node_modules\rollup\dist\shared\rollup.js:16012:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vite2vue3study@0.0.0 build:prod: `vue-tsc --noEmit && vite build --mode production`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vite2vue3study@0.0.0 build:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2021-09-17T08_00_39_340Z-debug.log
 
                    在不同的文件里面配置不同的环境变量，可以让我们的配置更加容易维护和使用，这里我们说下vite配置环境变量和模式是怎么配置的。Vite 在一个特殊的 import.meta.env 对象上暴露环境变量，官网上的东西咱这里就不抄了，O(∩_∩)O哈哈~我们这里直接说怎么做的，毕竟官网上没有实际使用的例子，在下在实际使用的时候还遇到点问题，当然也可以说是自己没用对吧。package.json里面的scripts修改，增加多个环境模式，如：  "scripts": {    "dev": "vite
				
在做项目环境变量配置前，可以先到官网回忆一下环境变量的基本使用，https://cn.vitejs.dev/guide/env-and-mode.html
一、环境模式
首先环境变量是可以分模式的，常用模式如下：
.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略
	默认情况下 Vite 只处理语法转译，且默认不包含任何 polyfill。
	通过引入polyfill
		可以前往 Polyfill.io 查看，这是一个基于用户浏览器 User-Agent 字符串自动生成 polyfill 包的服务
	通过插件支持:
		通过插件@vitejs/plugin-legacy来支持，它将自动生成传统版本的 chunk 及与其相对应 ES 语言特性方面的 polyfill
		兼容版的chunk只会在不支持原生 ESM 的浏览器中进行按需加载
公共基础路径
 import App from './App.vue'
import { createApp } from 'vue'
import { createRouter , createWebHistory } from 'vue-router'
import { generateRoutes } from 'vite-pages'
// https://vitejs.dev/guide/features.html#glob-import
const pages = import . meta . glob ( './pages/**/*.vue' )
const options = { }
const routes = gen
process.env 在vue3中不生效
vue3中使用 import.meta.env 获取环境变量
vite.config.ts中无法使用import.meta.env
export default (({ mode }) => {
    const VITE_APP_SERVER_URL: string = loadEnv(mode, process.cwd()).VITE_APP_SERVER_URL;
				
要在打包过程中，根据不通模式获取到不同的环境变量值，需要通过--mode选项标志来覆盖命令使用的默认模式，比如开发环境/测试环境/生产环境都对应不同的标题：
1. 先在项目根目录下创建三个.env文件对应三个环境变量；
2. 在package.json文件中scripts内传递 --mode 选项标志来覆盖命令使用的默认模式；
3. 使用const uploadFileUrl = ref(import.meta.env.VITE_APP_TITLE)