当前位置：首页 > news >正文

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

news 来源：原创 2025/4/27 14:28:51

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

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

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

package.json 地址

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

vite.config.js

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-aliasalias: [{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

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})
}