import react from '@vitejs/plugin-react'
import { defineConfig } from "vite"
const fs = require("fs")
const path = require("path")
// Dotenv 是一个零依赖的模块,它能将环境变量中的变量从 .env 文件加载到 process.env 中
const dotenv = require("dotenv")
const envFiles = [
/** default file */ `.env`,
/** mode file */ `.env.${process.env.NODE_ENV}`
]
for (const file of envFiles) {
const envConfig = dotenv.parse(fs.readFileSync(file))
for (const k in envConfig) {
process.env[k] = envConfig[k]
}
}
export default defineConfig({
define: {
'process.env': process.env
},
// 开发或生产环境服务的公共基础路径
base: './',
// 作为静态资源服务的文件夹
publicDir: 'assets',
plugins: [react ()],
resolve: {
// 文件系统路径的别名
alias: {
'@': path.resolve(__dirname, 'src'),
'vue': 'vue/dist/vue.esm-bundler.js',
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "./src/assets/style/index.scss";'
}
}
},
build: {
// 压缩
minify: process.env.VITE_NODE_ENV === 'production' ? 'esbuild' : false,
// 服务端渲染
ssr: false,
outDir: 'dist',
chunkSizeWarningLimit: 2000,
emptyOutDir: true,
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString()
}
}
}
}
},
server: {
host: process.env.VITE_HOST,
port: process.env.VITE_PORT,
// 是否自动在浏览器打开
open: false,
hmr: true,
proxy: {
'/api': {
target: "http://127.0.0.1:99999",
changeOrigin: true
}
}
}
})
.env
# loaded in all cases
// 报错时在host 配置一下
VITE_HOST = '0.0.0.0'
VITE_PORT = 8080
VITE_BASE_URL = './'
VITE_OUTPUT_DIR = 'dist'
.env.development
# 开发环境
VITE_NODE_ENV = 'development'
VITE_API_DOMAIN = '/api'
.env.production
# 生产环境
VITE_NODE_ENV = 'production'
VITE_API_DOMAIN = 'production.xxx.xxx'
package.json
"scripts": {
"dev": "vite",
"build-dev": "vite build --mode development",
"build-prd": "vite build --mode production",
"lint": "lint-staged ."
}
vite.config.ts
最新推荐文章于 2024-06-05 17:13:57 发布