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
    })
}
相关推荐
夕水39 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了42 分钟前
实现一个简单的Vue响应式
前端·vue.js
aklry2 小时前
uniapp三步完成一维码的生成
前端·vue.js
用户26124583401613 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川4 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术5 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
百锦再6 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了6 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
不讲道理的柯里昂6 小时前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷6 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js