shopxo-diy/vite.config.ts at master · gongfuxiang/shopxo-diy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
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]',
                },
            },
        },
    };
});