import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { visualizer } from 'rollup-plugin-visualizer';
import autoprefixer from 'autoprefixer';
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// 基础配置
base: '/', // 公共基础路径
root: './', // 项目根目录
resolve: {
alias: {
'@': '/src', // 设置别名以简化模块引用
},
extensions: ['.js', '.vue', '.ts', '.json', '.mjs'], // 自动解析的文件扩展名
},
// 插件配置
plugins: [
vue(), // Vue插件
AutoImport({
imports: ['vue', 'vue-router', 'pinia'],
resolvers: [ElementPlusResolver()],
dts: 'src/auto-imports.d.ts',
}),
Components({
resolvers: [
ElementPlusResolver({
importStyle: 'sass',
}),
],
dts: 'src/components.d.ts',
}),
visualizer({
open: true, // 是否在构建后自动打开可视化报告
gzipSize: true, // 是否显示gzip压缩后的大小
brotliSize: true, // 是否显示brotli压缩后的大小
}),
],
// CSS相关配置
css: {
postcss: {
plugins: [
autoprefixer({
overrideBrowserslist: ['last 2 versions', '> 1%', 'not dead'], // 自定义浏览器列表
}),
],
},
},
// 服务器配置
server: {
host: '0.0.0.0', // 指定服务器主机名
port: 8080, // 指定服务器端口
open: false, // 是否在启动时自动打开浏览器
proxy: {
'/api': {
target: 'http://localhost:3000', // 代理目标地址
changeOrigin: true, // 是否改变源
rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径
},
}
},
// 构建配置
build: {
target: 'esnext', // 构建目标
outDir: 'dist', // 输出目录
assetsDir: 'assets', // 静态资源目录
sourcemap: false, // 是否生成source map
minify: 'terser', // 代码压缩工具
terserOptions: {
compress: {
drop_console: true, // 移除console语句
drop_debugger: true, // 移除debugger语句
},
},
rollupOptions: {
output: {
manualChunks: {
'vue-vendor': ['vue', 'vue-router', 'pinia'], // 手动拆分Vue相关依赖
'element-plus': ['element-plus'], // 手动拆分Element Plus组件库
'chart': ['echarts'], // 手动拆分图表库
},
chunkFileNames: 'assets/js/[name]-[hash].js', // 分块文件名格式
entryFileNames: 'assets/js/[name]-[hash].js', // 入口文件名格式
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]', // 静态资源文件名格式
},
},
chunkSizeWarningLimit: 1000, // 分块大小警告阈值
},
});
报Access to XMLHttpRequest at 'http://36.137.33.94:8800/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Minify与nginx配置
本文介绍了如何在使用Minify进行前端优化时，在nginx服务器环境下进行正确的配置。文章提供了从Apache到nginx的重写规则转换示例，并说明了具体的配置步骤。
扫一扫
1654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
