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

浏览器查看打印结果：打印的是.env.development文件中的内容，import.meta.env这个环境变量是当前环境变量的内容。

8.2 生产环境

npm run build

打包后再dist目录选中index.html 右键运行 open with Live Server,同时注意在vite.config.js中配置根路径 base:'/',不然浏览器中会报错。

浏览器中显示的结果为：

但是存在一个问题是：打包后dist目录中index.html直接 live server，运行不ok 。请求数据不成功。因为请求的接口是live server重新起的服务。

所以我们不能直接使用live server直接运行生产环境。

想要预览生产环境解决办法：

再package.json的scripts中，添加"preview":"vite preview --mode production"

"preview":"vite preview --mode production"

然后再执行

npm run build
npm run preview

浏览器中预览，接口请求正常。

九，在vite.config.js中根据环境的不同动态切换路径

当defineConfig传入一个函数，而不是一个对象时

defineConfig
    传入一个函数，方法可以接收一个对象，对象中两个参数：command, mode
    command ：
    server(npm run dev)
    build(npm run build)
    mode ：development 和 production
    defineConfig传入的方法内可以接收一个对象，
    这个对象可以获取command和mode这两个属性，
    所以一般.env的文件命名是.env.development 和.env.production
    因为这样直接将mode传入 loadEnv(mode, process.cwd() ) 就可以了。

export default defineConfig((n) => {
  console.log("--------");
  console.log(n);
  console.log("--------");

  return {
    base: "./",
    server: {
      open: false, //项目启东时是否打开页面
      host: "127.0.0.1",
      port: 3456,
      proxy: {
        "^/api/": {
          target: "https://www.bilibili.com/", // 后台服务器地址
          changeOrigin: true /* 允许跨域 */,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
  };
});

console.log(n);

执行npm run dev defineConfig方法的参数打印结果在控制台显示为：

执行npm run build defineConfig方法的参数打印结果在控制台显示为：

获取环境变量loadEnv

loadEnv 接收三个参数，
mode：模式
envDir：环境变量配置文件所在目录
prefix：接受的环境变量前缀，默认为 VITE_
在vite中默认是VITE_，为 ''，则加载所有环境变量

/***defineConfig接受参数为函数形式***/

export default defineConfig(({command,mode}) => {
  
  const config = loadEnv(mode,'./')
  console.log("-------------------------------");
  console.log(mode)
  console.log(config)
  console.log("-------------------------------");

  return {
    base: "./",
    server: {
      open: false, //项目启东时是否打开页面
      host: "127.0.0.1",
      port: 3456,
      proxy: {
        "^/api/": {
          target: "https://www.bilibili.com/", // 后台服务器地址
          changeOrigin: true /* 允许跨域 */,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
  };
});

运行npm run dev得到结果如下：

运行npm run build得到结果如下：

所以根据环境变量动态配置跨域信息我们可以写成如下

NODE_ENV = development
VITE_NAME = '开发环境'
VITE_BASE_URL='/api'
VITE_TARGET ='https://baidu.com/'

NODE_ENV = production
VITE_NAME='生产环境'
VITE_BASE_URL = ''
VITE_TARGET ='https://www.bilibili.com/'

export default defineConfig(({command,mode}) => {  
  const config = loadEnv(mode,'./')
  return {
    base: "./",
    server: {
      open: false, //项目启东时是否打开页面
      host: "127.0.0.1",
      port: 3456,
      proxy: {
        "^/api/": {
          target: config.VITE_TARGET, // 从环境变量中获取
          changeOrigin: true /* 允许跨域 */,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
  };
});

本文转自 https://blog.csdn.net/blue_121/article/details/131221210 ，如有侵权，请联系删除。

是否确定退出登录?