更好的配置Vite

vite.config.js文件是在node环境下运行的，vite会将es模块化语法替换为commonjs模块化语法，所以我们可以使用import xxx from xxx的方式来写。
创建vite.config.js文件，文件内部写法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
import { defineConfig, optimizeDeps } from"vite";
exportdefault defineConfig(({ command }) => {
  console.log(process.env)
  //command:"build/serve"
  if (command == "build") {
    //生产环境的配置
    return {
      optimizeDeps: [], //写在数组里面的依赖不进行依赖预处理
    };
  } else {
    //开发环境的配置
  }
});

环境配置

vite使用dotenv来配置环境变量，dotenv会读取.env文件，并将.env文件中的配置注入process对象身上，但是vite考虑到一些冲突，所以不会直接把环境变量放到process上。如：root和envDir，vite可以通过envDir来配置环境变量的文件地址，故在defineConfig的函数变量内部读取process.env是没有意义的。不过可以通过loadEnv函数来解决这个问题。
loadEnv做了以下内容：
直接读取.env文件的配置内容将其放到一个对象中
会将传进来的mode值进行拼接：”.env.development”。并根据我们配置的路径找到对应的配置文件并将.env和.env.xxx的配置内容进行拼接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { defineConfig, loadEnv, optimizeDeps } from "vite";

export default defineConfig(({ command, mode }) => {
  //command:"build/serve"
  let env = loadEnv(mode, process.cwd());
  console.log(env);
  if (command == "build") {
    //生产环境的配置
    return {
      optimizeDeps: [], //写在数组里面的依赖不进行依赖预处理
    };
  } else {
    //开发环境的配置
  }
});

.env：默认情况下读取的环境变量，开发和生产等环境均可使用
.env.development：开发环境用到的环境变量
.env.production：生产环境用到的环境变量

1
2
3
npm run dev
相当于：
npm run dev --mode development

客户端：vite会将环境变量注入到import.meta.env中
node环境：通过loadEnv函数返回值读取
注意：如果客户端想使用环境变量，环境变量的名字必须使用VITE开头，若想修改前缀可以在vite.config.js中使用envPrefix配置。

1
2
3
4
5
export default defineConfig(({ command, mode }) => {
  return {
    envPrefix:"QIUHUA_"
  }
});