vite项目的vite.config.ts配置

原创已于 2022-11-24 13:41:56 修改 · 2.4k 阅读

5 ·

CC 4.0 BY-SA版权

(´▽`)ﾉ

文章标签：

#vue.js #javascript #前端

于 2022-11-22 21:18:27 首次发布

Vite 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Vite项目中配置Element Plus组件库实现按需加载，并设置路径别名及LESS全局变量，简化开发流程。

配置了element-plus自动按需引入，@路径别名，less能配置全局变量

// vite.config.ts
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite' //elements-plus自动引入
import Components from 'unplugin-vue-components/vite'//自动引入
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'//自动引入
import path from 'path'; //node的路径，必须安装@types/node来拓展node语法
export default defineConfig({
    plugins: [
        vue(),
        //配置elements-plus自动按需引入
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
    resolve: {
        alias: {
            // 配置路径别名@
            "@": path.resolve(__dirname, "src"),
        },
    },
    css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    //配置less全局变量都可用
                    hack: `true; @import (reference) "${path.resolve(__dirname, 'src/assets/global.less')}";`,  // src/assets/global.less 是你需要全局变量 （你定义的定义的方法 和 变量等）
                },
                javascriptEnabled: true
            }
        }
    }
})