Vite构建生产配置“build:prod“: “cross-env NODE_ENV=production vite build“含义
“build:prod”: “cross-env NODE_ENV=production vite build”
- cross-env: 这是一个工具,用于跨平台设置环境变量。在 Windows 和 Unix 系统中,设置环境变量的语法不同,因此使用 cross-env 可以确保在任何操作系统上都能正确设置环境变量。
- NODE_ENV=production: 这部分设置了一个名为 NODE_ENV 的环境变量,值为 production。在许多 Node.js 应用中,这个变量通常用来指示当前的运行环境,比如开发、测试或生产环境。Vite 默认会根据 NODE_ENV 的值来决定某些构建行为
- vite build: 这是运行 Vite 的构建命令,用于生成生产环境的静态文件
.env.production配置
VITE_DEV=false
VITE_APP_BASE_API='https://api.example.com'
运行npm run build:prod,就可以打生产的包
vite.config,ts自定义打包配置示例
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { loadEnv } from 'vite';export default defineConfig(({ mode }) => {const env = loadEnv(mode, process.cwd());return {plugins: [vue()],build: {outDir: 'dist', // 输出目录assetsDir: 'assets', // 静态资源存放路径sourcemap: mode === 'production', // 生产环境不生成 sourcemaprollupOptions: {output: {entryFileNames: '[name].[hash].js',chunkFileNames: '[name].[hash].js',assetFileNames: '[name].[hash].[ext]',},},minify: mode === 'production' ? 'terser' : false,terserOptions: {compress: {drop_console: true, // 移除 console.logdrop_debugger: true, // 移除 debugger},},},define: {'process.env': env, // 使环境变量在代码中可用},};
});