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