vite开发环境、生产环境配置
一，前言
一个项目可能会有开发版本、上线版本、测试版本等等多个版本，不同的环境会有不同请求api接口，就需更改一些基本配置，这时候就显得很麻烦，所以这里就使用了环境变量。我们只需做简单的配置，把环境状态切换的工作交给代码。
二，开发环境
也就是编码时运行的环境，即我们使用npm run dev或者npm run serve运行项目到本地时，项目处于的环境。
三、生产环境
项目部署到服务器上后处于的环境，我们使用npm run build将项目打包以后，再运行项目，项目就运行在生产环境中了。对于不同的环境，我们可以配置不同的环境变量，来实现开发和生产的兼容。
四，在多环境下要求前端工程架构流程
五，实战
1、新建项目目录； 2、新建index.html； 3、npm init -y 4、npm i axios -S； 5、npm i vite -D； 6、package.json，scripts里添加"dev":"vite" 7、npm run dev；
最终目录结构如下：
接下来新建：vite.config.js文件
import { defineConfig } from "vite";
export default defineConfig({
server: {
open: false, //项目启东时是否打开页面
host: "127.0.0.1",
port: 3456,
proxy: {
"^/api/": {
target: "https://www.bilibili.com/", // 后台服务器地址
changeOrigin: true /* 允许跨域 */,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});
然后新建main.js。并在index.html中引入
//main.js import axios from 'axios' axios.get('/api/index/ding.json').then(res=>{ console.log(res.data) })
在index.html中引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vite学习</title> </head> <body> <h1>vite开发环境、生产环境配置</h1> </body> <script type="module" src="./main.js"></script> </html>
打开浏览器，axios数据请求成功
六，配置环境文件
1， 在项目根目录下（与package.json同级）新建配置文件 .env
NODE_ENV = env VITE_NAME='全局环境' VITE_BASE_URL=''
.env：
全局环境，没有设置其他环境变量时，会加载这个文件里的内容，
比如所有版本都使用的是同一个接口地址时,就可以写在这一个文件里面就行。
2，在项目根目录下（与package.json同级）新建配置文件 .env.development
NODE_ENV = development VITE_NAME='开发环境' VITE_BASE_URL='/ap'
.env.development：
开发环境下的配置文件,执行npm run dev命令，会自动加载.env.development文件
会覆盖.env这个文件里定义的环境变量
3，在项目根目录下（与package.json同级）新建配置文件 .env.production
NODE_ENV = production VITE_NAME='生产环境' VITE_BASE_URL = 'http://xxxxxx/api'
.env.production：
生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件
会覆盖 .env这个文件里定义的环境变量
七，在package.json 文件中的配置
"scripts": { "dev": "vite --mode development", "build": "vite build --mode production", "start": "vite --mode production", "build:env": "vite build --mode development" }
dev 默认在本地开启测试环境的服务（mode='development'）
start 在本地开启正式环境服务 (mode='production')
build 默认打包到正式环境（基础配置取.env.production 文件中内容）
build:env 默认打包到测试环境（基础配置取.env.development 文件中内容）
八，具体使用
".env.[name]"是可以自定义的，在package.json里面做对应的名称修改。
根据Vite的约定规则，只有以“VITE_”开头的变量才会在客户端被捕获
捕获方式为：import.meta.env.{参数名}，然后重新启动服务
执行 npm run dev 时候，vite自动去读取.env.development文件里面的配置
执行 npm run build 进行打包，vite自动将.env.production 的内容打包进去。
8.1 开发环境
console.log(import.meta.env)
执行
npm run dev
