如何在vue3+vite+ts中配置环境变量

如何在vue3+vite+ts中配置环境变量

1. 首先在全局目录中新建.env.development文件和.env.production文件

文件如下：
NODE_ENV = 'development'
VITE_XXXX = 'https://xxx'
VITE_XXXX= 'https://xxx'
坑点：所有的url必须是以VITE_开头！！！！！否则在别的页面根本访问不到这里的变量了

2、在vite.config.ts中增加对应的配置

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd());  //重点！！！！
  console.log("当前环境", env);
  return {
    plugins: [vue()],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
    base: "./",
  };
});

3、在package.josn文件中加入模式选择

"dev": "vite --mode development",
    "build": "run-p type-check build-only",   //备注：默认打包是pro环境，不需要在额外加mode字段了
    "preview": "vite preview",
    "build-only": "vite build",
    "build:dev": "vite build --mode development",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"

4、在别的页面中访问env里面声明的变量：

const xxx = import.meta.env.VITE_XXX``

重要的说一遍！！！！
env文件中必须以VITE_开头，否则完全识别不到
build命令不需要在后面额外加上--mode production字段，会报错！！！！！