vue3 + element-plus + vite 注意事项

最新推荐文章于 2024-09-26 15:00:07 发布
最新推荐文章于 2024-09-26 15:00:07 发布
阅读量4.5k 收藏 4
点赞数
分类专栏： Vue 文章标签： vue vue3 elementui element plus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26769677/article/details/114505341
版权
本文详细介绍了在使用vue3、element-plus和vite进行开发时可能遇到的问题及其解决方案，包括Uncaught SyntaxError错误、浏览器刷新变空白、路径别名设置、分目录打包、跨域配置等，帮助开发者顺利进行项目构建。
摘要由CSDN通过智能技术生成
vue3 + element-plus + vite 注意事项

vue3发布以来很多ui库都做了跟进，比如vant、ant、element…各个项目还在探索阶段，所以如果使用的话得做好迎接各个库bug的准备~

element-plus

原element库很久很久没有人维护了，不知道这个element-plus会维护多久。

安装啥的步骤element-plus网站都有。

需要注意的是，按需引用时记得引入样式文件import 'element-plus/lib/theme-chalk/index.css';

按需引入的全局size设置：app.config.globalProperties.$ELEMENT = { size: 'small', zIndex: 3000 }。

Uncaught SyntaxError: Cannot use import statement outside a module
<script type="module" src="/src/main.ts"></script>

根目录下的index.html

最低0.47元/天 解锁文章
hello，是翠花呀
关注
专栏目录
Vite2.0+Vue3.0+Element-Plus+TypeScript 配置及注意事项补充
平塘大鱼儿
09-14 1195
配置完成后使用import.meta.env. 就会有自动提示定义在 .env.delepolment 、.env.production 文件中的环境变量。在vite+vue3的项目中建议使用 import.meta.env.VITE_自定义变量的方式使用环境变量。检查env.d.ts 文件的位置，如果改文件在src目录下则内容可以被直接加载否则需要在 tsconfig.json 中配置 ./env 的路径。使用 import.meta.env.VITE_自定义环境变量时路径爆红。
解决Uncaught SyntaxError: Cannot use import statement outside a module(at XXX)报错
qq_53911056的博客
02-18 2万+
报错原因：这个错误通常是因为你正在尝试在一个不支持 ES6 模块语法的环境中使用 import 语句。这可能是因为你的代码是在一个只支持 CommonJS 或 AMD 模块系统的环境中运行的，或者你的代码运行的环境没有正确配置以支持 ES6 模块。
Failed to load module script: Expected a JavaScript module script but the server responded with a MI
最新发布
sgevsn的博客
09-26 558
本地项目刷新页面正常，项目部署后刷新页面除了首页正常外其余页面均白屏，控制台报错Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
vue3全局控制Element plus所有组件的文字大小
LlanyW的专栏
03-27 3115
项目框架vue-右上角有控制全文的文字大小。
element plus使用问题
PBitW的博客
01-27 1534
element plus vue.config.js 注意 1、有时候会报错 not a function 2、使用 ElMessage 报错 3、 element plus 版本过高 4、警告Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined. 5、报错 ResizeObserver loop completed with undelivered notifications. element plus ico
vue3后台管理框架之全局配置element-plus
m0_52704461的博客
10-15 2093
本篇主要介绍集成element-plus，主要包括全量引入，部分引入，element-plus一些常用配置等element-plus官方文档我们先看看element-plus介绍 -----基于 Vue 3，面向设计师和开发者的组件库。
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板的 vue3 版本
04-02
在这个 Vue3 版本中，开发者可以享受到 Vue3 的所有改进，同时利用 Vite5 的快速构建优势，以及 Element-Plus 提供的现代 UI 设计。 "vue3-element-admin_master.zip" 文件很可能是这个项目的源代码压缩包，解压后...
element-plus 自动引入全局配置size、zIndex、locale
xu_yi_hang的博客
03-03 3700
组件形式配置全局。全部引入、自动引入、按需引入都可用
VUE3 学习笔记（13）：VUE3 下的Element-Plus基本使用
众纳百川的博客
06-04 661
UI是页面的门面，一个好的UI自然令人赏心悦目；国人团队开发的ElementUI在众多UI中较为常见，因此通过介绍它的使用让大家更好的了解第三方UI的使用。
vue3.0+vite+router搭建项目（三）:配置vite.config.js
前端互助会
03-09 3757
前言：上一篇文章中，我们已经讲解了项目搭建的方法以及过程总出现bug的解决方法。这篇文章主要讲解一下配置。 一、vite 配置别名 使用编辑器打开搭建号的项目 进入配置文件 vite.config.js。 import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/export default defineConfig({
Vite基本配置
grx1125的博客
03-24 3722
vite的基本配置，包含vite背后帮我们构建的一些插件、构建的部分原理。
SyntaxError: Cannot use import statement outside a module
jyf_568的博客
11-25 679
搭建第一个 Vite 项目 兼容性注意 Vite 需要Node.js版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。 vite跟vue2版本的node不兼容 ...
Uncaught SyntaxError: Cannot use import statement outside a module
热门推荐
游海东的技术专栏
08-06 5万+
1、错误描述 Uncaught SyntaxError: Cannot use import statement outside a module 2、错误原因 定义了一个JavaScript文件，声明几个变量，利用模块化导出变量 let name = '张华' let age = 23 let sex = '女' export {name, age, sex} 接着，在页面文件中直接导入import；打开浏览器访问页面，控制台出现报错 <!DOCTYPE...
Node.js-COMMONJS 规范
zjjcchina的博客
03-23 1432
ECMAScript 标准的缺陷 没有模块系统 标准库较少 没有标准接口 缺乏管理系统 模块化 如果程序设计的规模达到了一定程度，则必须对其进行模块化 。 模块化 可以有多种形式，但至少 应该 提供能够将代码分割为多个源文件的机制 。 CommonJS 的模块 功能可以帮我们解决该问题。 尚硅谷web前端培训_一家专业的web前端培训机构 HTML5 web前端 前端视频 尚硅谷比就业、拼课程、论口碑更给力 尚硅谷IT培训 立即咨询 CommonJS 规范 CommonJS 规范
Vue3 框架使用报错以及解决办法
chenacxz的博客
08-20 1万+
el-submenu,但是显示出了问题，不能正常显示。感觉是这个组件的问题，查了一圈没找到解决方法，最后看官方文档发现el-submenu变成了el-sub-menu。7、vue.config.ts import path from 'path' 配置报错。8、vue3+element-plus里面的el-submenu组件显示问题。4、yarn add element-plus --save报错。引入组件时，没有添加.vue后缀 或者引入的组建没有被使用。3、cnpm安装element-plus报错。..
vite构建build选项配置（2024-05-29）
hap1994的博客
05-29 3222
可以返回一个新的依赖关系数组，可能被过滤后变少了，也可能有更多依赖注入进来了，同时它们的路径也被修改过。将静态资源在构建后合并是框架的责任。最直观的示例是当你要兼容的场景是安卓微信中的 webview 时，它支持大多数现代的 JavaScript 功能，但并不支持。当启用时，在异步 chunk 中导入的 CSS 将内联到异步 chunk 本身，并在其被加载时一并获取。此选项允许用户为 CSS 的压缩设置一个不同的浏览器 target，此处的 target 并非是用于 JavaScript 转写目标。
vite+vue3+element-plus图标自定义实现方式
06-02
要在vite+vue3+element-plus中自定义图标，可以按照以下步骤进行操作： 1. 下载需要的图标素材，可以是svg、png、jpg等格式的图片。 2. 将下载的图标素材放置到项目中的某个目录下，比如`src/icons/svg`目录。 3. 在`main.js`中引入`@element-plus/icons`，并注册自定义图标。 ```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import { register } from '@element-plus/icons' import { App as AppIcon } from './icons/svg/app.svg' register({ 'app': AppIcon }) createApp(App).use(ElementPlus).mount('#app') ``` 4. 在需要使用自定义图标的地方，使用`el-icon`组件，并传入注册的图标名称。 ```html <template> <div> <el-icon name="app"></el-icon> </div> </template> ``` 以上就是vite+vue3+element-plus图标自定义的实现方式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值