vite 环境变量配置

在根目录新建.dev.production和.env.development文件

NODE_ENV = 'development'
VITE_APP_BASE_API = /developmentApi 

NODE_ENV = 'production'
VITE_APP_BASE_API = /productionApi 
VITE_APP_BASE_URL = /index/

在vue文件需要使用的地方

console.log(import.meta.env.VITE_APP_BASE_API)

vite.config.ts

import path from "path";
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default ({ mode }) => {
  //参数mode为开放模式或生产模式
  const env=loadEnv(mode, process.cwd());   // 获取.env文件里定义的环境变量
  
  return defineConfig({
    plugins: [vue()],

    resolve: {
      alias: {
        //别名配置
        "@": path.resolve(__dirname, "src"), 
        "@comp": path.resolve(__dirname, "src/components"),
      },
    },
    server: {
      proxy: {
        "/api": {
          target: env.VITE_APP_API,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
    //项目部署在主域名的子文件使用,例如http://localhost:3000/myvite/。不填默认就是/
    base: env.VITE_APP_BASE_URL || '/',
  })
}

打包后放在nginx--html--index目录下面

router.ts

const base_url = import.meta.env.BASE_URL; //获取vite.config.js配置的base,默认是根目录/
const router = createRouter({
  history: createWebHistory(base_url),
  routes,
});