vite+vue2+elementui构建之 vite.config.js

webpack版本太低，构建依赖太多，头大。

各种查阅资料，弄了一份直通构建vite构建elementUi核心文件，

构建基于开源若依vue2+vue3版本改造，感谢开源，感谢若依。

package.json 地址

vite+vue2+elementui构建之 package.json-CSDN博客

vite.config.js

javascript 复制代码

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue2';
import path from 'path'
import autoImport from "unplugin-auto-import/vite"
import createSvgIcon from "./vite/plugins/svg-icon.js";
import vueJsx from '@vitejs/plugin-vue2-jsx';

//https://vitejs.dev/config/
export default defineConfig(({mode, command}) => {
    return {
        base: '/',
        plugins: [
            vue({
                "jsx": true,
            }),
            vueJsx(),
            autoImport({
                imports: [
                    'vue',
                    'vue-router'
                ],
                dts: false
            }),
            createSvgIcon(command === 'build')
        ],
        resolve: {
            // https://cn.vitejs.dev/config/#resolve-alias
            alias: [
                {find: '@', replacement: path.resolve(__dirname, './src')},
                {find: '~', replacement: path.resolve(__dirname, './')},
            ],
            extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
        },
        css: {
            preprocessorOptions: {
                scss: {
                    javascriptEnabled: true,
                }
            },
            postcss: {
                plugins: [
                    {
                        postcssPlugin: 'internal:charset-removal',
                        AtRule: {
                            charset: (atRule) => {
                                if (atRule.name === 'charset') {
                                    atRule.remove();
                                }
                            }
                        }
                    }
                ]
            }
        },
        // vite 相关配置
        server: {
            port: 8090,
            host: true,
            open: true,
            proxy: {
                // https://cn.vitejs.dev/config/#server-proxy
                '/api': {
                    target: 'http://localhost:8080',
                    changeOrigin: true,
                    rewrite: (p) => p.replace(/^\/api/, '')
                }
            }
        },
    }
})

createSvgIcon

javascript 复制代码

import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
import path from 'path'

export default function createSvgIcon(isBuild) {
    return createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
        symbolId: 'icon-[dir]-[name]',
        svgoOptions: isBuild
    })
}