项目打包不同环境
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/, ''),
},
},
},
})