import {fileURLToPath, URL} from 'node:url'
import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers' export default defineConfig(({mode}) => {
const env = loadEnv(mode, process.cwd(), '')
return {
base: './',
server: {
host: '0.0.0.0',
},
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
output:{
// 最小化拆分包
manualChunks: (id) => {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
},
// 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
entryFileNames: 'js/[name].[hash].js',
// 用于命名代码拆分时创建的共享块的输出命名
chunkFileNames: 'js/[name].[hash].js',
// 用于输出静态资源的命名,[ext]表示文件扩展名
assetFileNames: '[ext]/[name].[hash].[ext]',
},
outDir: '../run',
rollupOptions: { }
},
} })

vite 引入element的更多相关文章

  1. vue按需引入element或mint

    vue按需引入element或mint需要添加 babel-preset-es2015 和babel-plugin-component

  2. vue项目引入element

    前提工作-安装并配置好以下环境: 1.安装node  2.安装git 1.初始化项目 vue init webpack vue-elementui npm run dev 2.安装element np ...

  3. vue-cli脚手架引入element UI的正确打开方式

    element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...

  4. vue Cli 按需引入Element UI 和全局引用Element UI

    全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...

  5. vue3.0+vite按需引入element plus

    1.安装vite-plugin-style-import yarn add vite-plugin-style-import -D 2.在项目根目录下的vite.config.js中配置 import ...

  6. 在vue2.x项目中怎么引入Element UI

    参考:https://blog.csdn.net/u014054437/article/details/79862793 Element使用方法:https://element.eleme.cn/#/ ...

  7. vue按需引入Element UI的方法

    在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们 ...

  8. Vue3+Vite引入Echarts5.0图表库

    1 概述 环境Vue3+Vite,需要引入ECharts库. 2 尝试 目前ECharts已更新到5.0版本,在Vue中引入并不难,npm/cnpm安装后在需要的组件中引入: import echar ...

  9. vue-cli按需引入Element UI组件

    一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...

  10. 新启vue_cli项目+引入Element

    [1]安装vue_cli vue init webpack 项目名字 [2]安装Element-UI cnpm install element-ui -S //写入dependencies cnpm ...

随机推荐

  1. VSTO踩坑记录(3)- 用ClickOnce发布outlook插件 - 我数据文件呢?

    概述 上面两篇文章虽然很简略,不过vsto说白了就是winform开发,所以需要说的内容不是很多,下面直接到发布阶段. 这次先介绍ClickOnce的发布方式,默认右击项目 - 发布,就是这种方式. ...

  2. 前端学习openLayers配合vue3(加载矢量图标)

    今天我们来进行矢量图标的加载 关键代码 有一个比较注意的点就是,图片路径必须引入不能直接写路径,我找半天也没发现问题所在 let anchorLayer=new VectorLayer({ sourc ...

  3. CDS标准视图:技术对象检验级别 I_TechObjInspectionLevelCode

    视图名称:技术对象检验级别 I_TechObjInspectionLevelCode 视图类型:基础 视图代码: 点击查看代码 @AbapCatalog: { sqlViewName: 'ITECHO ...

  4. 学Shiro完结版-5

    第二十一章 授予身份及切换身份--<跟我学Shiro> 在一些场景中,比如某个领导因为一些原因不能进行登录网站进行一些操作,他想把他网站上的工作委托给他的秘书,但是他不想把帐号/密码告诉他 ...

  5. .NET 9 new features-C#13新的锁类型和语义

    C# 13 中,引入了新的锁类型和语义,主要用于增强多线程编程中的同步机制. 传统上,C# 使用 lock 关键字与任意的 object 实例配合,实现线程间的互斥访问.然而,这种方式可能存在性能瓶颈 ...

  6. 2025春秋杯DAY2DAY3部分wp

    2025春秋杯DAY2DAY3部分wp DAY2 WEB easy_ser 源码如下 <?php //error_reporting(0); function PassWAF1($data){ ...

  7. 智算引领 AI启航,中国电信天翼云助推辽宁数智发展!

    近日,中国电信辽宁公司"智算引领 AI启航"新质生产力赋能辽宁新时代"六地"建设大会在沈阳圆满落幕.辽宁省工业和信息化厅,省国资委,省数据局,省农业农村厅,沈阳 ...

  8. 一种基于Nginx的热点数据调度处理方法

    本文分享自天翼云开发者社区<一种基于Nginx的热点数据调度处理方法>,作者:康****彬 一.应用场景 基于Nginx的热点数据调度处理,热点节点数据负载均衡处理,减少热点节点压力,提高 ...

  9. ceph 16.2.15(Pacific)编译

    目录 获取ceph源码 编译 拉取submodule网络问题 安装依赖 do_cmake.sh 编译 vstart启动 问题 编译dashboard 安装nodejs 方法一 下载编译好的源码包 方法 ...

  10. Doris插入数据底层存储测试

    建表语句 CREATE TABLE IF NOT EXISTS base_site_test( site_id INT DEFAULT '10', city_code INT, user_name V ...