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