生产环境配置
This commit is contained in:
parent
214bc66b1c
commit
62e21f5e0e
|
|
@ -2,7 +2,7 @@
|
|||
NODE_ENV = production
|
||||
|
||||
# 生产环境接口基础地址
|
||||
VITE_API_BASE_URL = https://api.yourdomain.com
|
||||
VITE_API_BASE_URL = http://18.167.120.9:8086/api
|
||||
|
||||
# 请求超时时间(毫秒)
|
||||
VITE_REQUEST_TIMEOUT = 10000
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "run-p type-check \"build-only {@}\" --",
|
||||
"build:prod": "vite build --mode production",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build",
|
||||
|
|
|
|||
|
|
@ -12,39 +12,22 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
|||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig(({ mode }) => {
|
||||
const isProduction = mode === 'production'
|
||||
|
||||
return {
|
||||
plugins: [
|
||||
vue(),
|
||||
vueDevTools(),
|
||||
//自动导入Vue/路由/Pinia等API(无需手动import)
|
||||
// 生产环境移除 devTools 插件(减少产物体积)
|
||||
...(!isProduction ? [vueDevTools()] : []),
|
||||
AutoImport({
|
||||
// 适配Element Plus的自动导入
|
||||
resolvers: [
|
||||
ElementPlusResolver(),
|
||||
],
|
||||
// 指定要自动导入的库
|
||||
imports: [
|
||||
'vue', // 自动导入ref、reactive、watch等Vue API
|
||||
'vue-router', // 自动导入useRoute、useRouter等路由API
|
||||
'pinia', // 自动导入defineStore等Pinia API
|
||||
'@vueuse/core', // 自动导入@vueuse的hooks
|
||||
],
|
||||
// 生成类型声明文件(TypeScript必备,解决类型提示问题)
|
||||
resolvers: [ElementPlusResolver()],
|
||||
imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
|
||||
dts: 'src/auto-imports.d.ts',
|
||||
// 自动生成eslint配置(解决eslint报"未定义变量"的问题)
|
||||
eslintrc: {
|
||||
enabled: true, // 开启后会生成 .eslintrc-auto-import.json
|
||||
},
|
||||
eslintrc: { enabled: true },
|
||||
}),
|
||||
// 2. 自动导入组件(包括Element Plus和本地组件)
|
||||
Components({
|
||||
// 自动解析Element Plus组件
|
||||
resolvers: [
|
||||
ElementPlusResolver(),
|
||||
],
|
||||
// 生成组件类型声明文件
|
||||
resolvers: [ElementPlusResolver()],
|
||||
dts: 'src/components.d.ts',
|
||||
// 指定要自动导入的本地组件目录(src/components下的组件无需手动注册)
|
||||
dirs: ['src/components'],
|
||||
}),
|
||||
],
|
||||
|
|
@ -54,30 +37,51 @@ export default defineConfig(({ mode }) => {
|
|||
},
|
||||
},
|
||||
|
||||
// 构建配置
|
||||
// ====== 增强版生产构建配置 ======
|
||||
build: {
|
||||
// 输出目录
|
||||
outDir: 'dist',
|
||||
// 静态资源目录
|
||||
assetsDir: 'assets',
|
||||
// 生产环境移除console和debugger
|
||||
|
||||
// 生产环境 sourcemap 配置(可选:隐藏源码但保留行映射)
|
||||
sourcemap: isProduction ? 'hidden' : true,
|
||||
|
||||
// chunk 分割策略(优化加载性能)
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
// 将第三方库单独分包
|
||||
'element-plus': ['element-plus', '@element-plus/icons-vue'],
|
||||
'vendor': ['vue', 'vue-router', 'pinia'],
|
||||
'utils': ['axios', 'dayjs', 'crypto-js', '@vueuse/core'],
|
||||
},
|
||||
// 文件名带 hash(缓存优化)
|
||||
chunkFileNames: 'assets/js/[name]-[hash].js',
|
||||
entryFileNames: 'assets/js/[name]-[hash].js',
|
||||
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
|
||||
},
|
||||
},
|
||||
|
||||
// 压缩配置
|
||||
minify: 'esbuild',
|
||||
esbuild: {
|
||||
drop: mode === 'production' ? ['console', 'debugger'] : [],
|
||||
// 剔除 JS 中的所有注释(包括注释掉的代码)
|
||||
minifyIdentifiers: true, // 压缩变量名
|
||||
minifySyntax: true, // 压缩语法(含剔除普通注释)
|
||||
minifyWhitespace: true, // 剔除空格
|
||||
drop: isProduction ? ['console', 'debugger'] : [],
|
||||
minifyIdentifiers: true,
|
||||
minifySyntax: true,
|
||||
minifyWhitespace: true,
|
||||
},
|
||||
// 可选:进一步压缩打包产物
|
||||
// terserOptions: mode === 'production' ? {
|
||||
// format: {
|
||||
// comments: false, // 彻底剔除所有注释
|
||||
// },
|
||||
// } : {},
|
||||
|
||||
// 大文件警告阈值(默认500KB,可调整)
|
||||
chunkSizeWarningLimit: 1000,
|
||||
},
|
||||
|
||||
// 生产环境不显示错误遮罩
|
||||
define: {
|
||||
__VUE_PROD_DEVTOOLS__: 'false',
|
||||
},
|
||||
|
||||
server: {
|
||||
host: true,
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue