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. C Primer Plus 第6版 第四章 编程练习参考答案

    编译环境VS Code+WSL GCC 源码请到文末下载 /*第1题*************************/ #include<stdio.h> int main() { ch ...

  2. zsh 切换root用户后,命令执行后要卡顿2s左右

    在 oh-my-zsh 进入 包含 git 仓库目录时,会变的比平时慢/卡顿 原因是因为 oh-my-zsh 要**获取 git 更新信息 ** **解决办法: ** 设置 oh-my-zsh 不读取 ...

  3. .Net Core 管道底层源码实现

    在 .NET Core 中,请求处理管道是一个中间件(Middleware)链,用于处理 HTTP 请求并生成响应.管道的底层实现基于 Microsoft.AspNetCore.Http 命名空间中的 ...

  4. NET Core3.1 Cors 添加跨域支持

    在 Startup 里加: services.AddCors(options => options.AddPolicy( DefaultCors, p => p.SetIsOriginAl ...

  5. 【运维必看】Linux命令之lsblk命令

    一.命令简介 lsblk命令的英文是"list block",即用于列出所有可用块设备的信息,而且还能显示他们之间的依赖关系,但是它不会列出RAM盘的信息.块设备有硬盘,闪存盘,C ...

  6. 使用树莓派学习Linux驱动 硬件环境评估

    1. 现有设备 surface,树莓派3B 简介 优点 缺点 树莓派+鼠标键盘显示屏 开发方便 需要购买小/静音键盘 需要购买显示屏 显示屏小了用着不舒服,大了太贵 树莓派不需要显示屏!将来还要刷机不 ...

  7. Fractal pg walkthrough Easy

    nmap ┌──(root㉿kali)-[~] └─# nmap -p- -A 192.168.157.233 Starting Nmap 7.94SVN ( https://nmap.org ) a ...

  8. ef 值转换与值比较器

    前言 简单介绍一下,值转换器和值比较器. 正文 为什么有值转换器这东西呢? 那就是这个东西一直必须存在. 比如说,我们的c# enum 对应数据库的什么呢? 是int还是string呢? 一般情况下, ...

  9. 安装和配置CentOS9

    安装和配置CentOS9 一.下载CentOS9镜像文件 1.访问官网:首先,你需要访问CentOS的官网或阿里云镜像网站 2.选择版本:在官网上,选择CentOS9的64位操作系统版本进行下载. 3 ...

  10. macOS安装软件过程中常见几种报错的解决办法

    对于刚使用 macOS 或者在更新系统后尝试运行应用时遇到问题的用户,可能会看到以下几种错误提示: xxx已损坏,无法打开,你应该将它移到废纸篓 打不开 xxx,因为它来自身份不明的开发者 打不开xx ...