vite环境变量

vite环境变量

1、根目录创建 .env.development 、 .env.production

// .env.development 开发环境地址
NODE_ENV = 'development'
VITE_BASE_URL = '开发环境地址'
// .env.production 生产环境地址
NODE_ENV = 'production'
VITE_BASE_URL = '生产环境地址'


// 可以拿到当前环境中的地址
import.meta.env.VITE_BASE_URL

2、找到package.json 修改里面的启动命令

"dev": "vite --mode development",
"build": "vue-tsc --noEmit && vite build --mode production",

3、可以在vite.config.ts中打印 loadEnv(mode, process.cwd()).VITE_BASE_URL

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'
export default defineConfig(({ command, mode }) => {
  // command 运行标记 build  serve
  
  console.log(loadEnv(mode, process.cwd()).VITE_BASE_URL)

  return {
    plugins: [vue()],
    resolve: {
      alias: [
        {
          find: '@',
          replacement: path.resolve(__dirname, './src'),
        },
      ],
    },
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            hack: `true; @import (reference) "${path.resolve(
              'src/publicStyle/varLess.less'
            )}";`,
          },
          javascriptEnabled: true,
        },
      },
    },
    server: {
      cors: true,
      port: 8848,
      open: true,
      proxy: {
        '/api': {
          target: loadEnv(mode, process.cwd()).VITE_BASE_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
  }
})