138 lines
5.7 KiB
TypeScript
138 lines
5.7 KiB
TypeScript
import vue from '@vitejs/plugin-vue';
|
||
|
||
import { UserConfig, ConfigEnv, loadEnv, defineConfig } from 'vite';
|
||
|
||
import AutoImport from 'unplugin-auto-import/vite';
|
||
import Components from 'unplugin-vue-components/vite';
|
||
|
||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
|
||
import path from 'path';
|
||
const pathSrc = path.resolve(__dirname, 'src');
|
||
|
||
// https://vitejs.dev/config/
|
||
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
|
||
const env = loadEnv(mode, process.cwd());
|
||
return {
|
||
resolve: {
|
||
alias: {
|
||
'@': pathSrc,
|
||
},
|
||
},
|
||
css: {
|
||
// CSS 预处理器
|
||
preprocessorOptions: {
|
||
//define global scss variable
|
||
scss: {
|
||
javascriptEnabled: true,
|
||
additionalData: `@use "@/styles/variables.scss" as *;`,
|
||
},
|
||
},
|
||
},
|
||
server: {
|
||
host: '0.0.0.0',
|
||
port: Number(env.VITE_APP_PORT),
|
||
open: true, // 运行是否自动打开浏览器
|
||
proxy: {
|
||
// 反向代理解决跨域
|
||
[env.VITE_APP_BASE_API]: {
|
||
target: env.VITE_APP_BASE_API_URL, // 接口地址
|
||
changeOrigin: true,
|
||
rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), ''), // 替换 /dev-admin 为 target 接口地址
|
||
},
|
||
// 反向代理解决跨域
|
||
[env.VITE_APP_BASE_API_PHP]: {
|
||
target: env.VITE_APP_BASE_API_PHP_URL, // 接口地址
|
||
changeOrigin: true,
|
||
rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API_PHP), ''), // 替换 /dev-api 为 target 接口地址
|
||
},
|
||
// 反向代理解决跨域
|
||
[env.VITE_APP_BASE_API_INDEX_PHP]: {
|
||
target: env.VITE_APP_BASE_API_INDEX_PHP_URL, // 接口地址
|
||
changeOrigin: true,
|
||
rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API_INDEX_PHP), ''), // 替换 /dev-index 为 target 接口地址
|
||
},
|
||
},
|
||
},
|
||
plugins: [
|
||
vue({
|
||
script: {
|
||
// 开启defineModel配置
|
||
defineModel: true,
|
||
},
|
||
}),
|
||
AutoImport({
|
||
// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
|
||
imports: ['vue', '@vueuse/core'],
|
||
eslintrc: {
|
||
enabled: true,
|
||
filepath: './.eslintrc-auto-import.json',
|
||
globalsPropValue: true,
|
||
},
|
||
resolvers: [
|
||
// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)------若是没有自动引入，请耐心等待，反应特别慢，希望以后可以优化
|
||
ElementPlusResolver(),
|
||
],
|
||
vueTemplate: true,
|
||
// 配置文件生成位置(false:关闭自动生成)
|
||
// dts: false,
|
||
dts: path.resolve(pathSrc, 'types', 'auto-imports.d.ts'), // 指定自动导入函数TS类型声明文件路径
|
||
}),
|
||
Components({
|
||
resolvers: [
|
||
// 自动导入 Element Plus 组件
|
||
ElementPlusResolver(),
|
||
],
|
||
dirs: ['src/**/components'],
|
||
// 配置文件生成位置(false:关闭自动生成)
|
||
// dts:false,
|
||
dts: path.resolve(pathSrc, 'types', 'components.d.ts'), // 指定自动导入组件TS类型声明文件路径
|
||
}),
|
||
],
|
||
|
||
// 构建配置
|
||
build: {
|
||
target: 'esnext',
|
||
// 打包不压缩图片为base64
|
||
assetsInlineLimit: 0,
|
||
// 混淆器设置
|
||
minify: 'terser',
|
||
// 不生成source map文件，默认false
|
||
sourcemap: false,
|
||
// 指定输出路径（相对于项目根目录)，默认dist
|
||
outDir: 'dist',
|
||
// 指定生成静态资源的存放路径，默认assets
|
||
assetsDir: 'assets',
|
||
// chunk大小警告限制，默认500kbs
|
||
chunkSizeWarningLimit: 1500,
|
||
// 是否禁用css拆分(默认true)，设置false时所有CSS将被提取到一个CSS文件中
|
||
cssCodeSplit: true,
|
||
// 简要配置
|
||
terserOptions: {
|
||
compress: {
|
||
// 移除console
|
||
drop_console: false,
|
||
// 移除debugger
|
||
drop_debugger: true,
|
||
},
|
||
// 保留类名
|
||
keep_classnames: true,
|
||
format: {
|
||
// 移除所有的注释
|
||
comments: false,
|
||
},
|
||
},
|
||
// js、css等文件打包到不同文件夹
|
||
rollupOptions: {
|
||
output: {
|
||
// 自定义 chunk 文件的输出路径和文件名格式
|
||
chunkFileNames: 'static/diy/js/chunk/[name]-[hash].js',
|
||
// 自定义 entry chunk 的输出路径和文件名格式
|
||
entryFileNames: 'static/diy/js/entry/[name]-[hash].js',
|
||
//非js文件夹，按照文件类型分类css,png,jpg
|
||
assetFileNames: 'static/diy/[ext]/[name]-[hash].[ext]',
|
||
},
|
||
},
|
||
},
|
||
};
|
||
});
|