项目打包不同环境

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/, ''),},},},
})