项目打包不同环境

1.vite的 env文件作用

在项目的根目录下创建 .env 文件。你可以为不同的环境创建不同的文件，例如 .env.development、.env.production 等。

.env：全局默认配置文件，无论什么环境都会加载合并。

.env.development：开发环境的配置文件

.env.production：生产环境的配置文件

 文件配置

在 .env 文件中定义环境变量，变量名必须以 VITE_ 为前缀才会暴露给客户端代码。例如

NODE_ENV='test'
VITE_APP_TITLE=routing-vite-test
# API URL
VITE_PUBLIC_URL='http://192.168.128.21/vite-dev/'

在应用程序中，你可以通过 import.meta.env 对象来访问这些环境变量。例如，在 Vue 组件中：

<script setup>
console.log(import.meta.env.VITE_APP_TITLE);
</script>

这将输出定义在 .env 文件中的 VITE_APP_TITLE 环境变量的值。

项目会根据启动命令自动加载相对应的环境配置文件。vue，react是根据文件名进行加载的，所以说“不要乱起名，也无需专门控制加载哪个文件”

可以通过 npm run 看有哪些可以运行项

运行npm run xxxx的时候主要还是看package.json中 xxxx属性的--mode后面跟的是啥。如果是development，就会加载.env.development文件。

在package.json里面配置好

 "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "test": "vite build --mode test",
    "preview": "vite preview"
    
  },

 2.设置打包的静态文件目录

通过在vite.config.ts配置base：url，可以改变打包静态资源的路径

import react from '@vitejs/plugin-react-swc'
import path from 'path'
import { visualizer } from 'rollup-plugin-visualizer'
import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/sssss-vite/',
  // base: '/sssss-vite-dev',看线上对应服务器什么路径就写什么
  plugins: [react(), viteCompression()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  build: {
    rollupOptions: {
      plugins: [
        visualizer({
          open: false,
          template: 'treemap',
          gzipSize: true,
          brotliSize: true,
        }),
      ],
    },
  },
  server: {
    proxy: {
      '/routing-vite/api': {
        target: 'http://192.168.106.28:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/routing-vite\/api/, ''),
      },
    },
  },
})