草庐IT

[plugin:vite:import-analysis] Failed to resolve import “@/views/Login.vue“ from “src\router\index.ts

报错截图报错原因是没有引入@相关的配置先安装path模块npminstall--save-dev@types/node修改vite.config.js文件import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom'path'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{'@':path.resolve(__dirname,'src')}}})在重新启动项目就可以了

vue3+vite+js 引用public文件夹中js文件

1、/public/ep.jswindow.endpoints={api:'http://localhost:8080/api/v1'}2、页面入口index.html    在head中引入js文件........3、其他页面使用constapi=window.endpoints.api

vite项目 Uncaught Syntaxerror: Unexpected token > vue项目上线白屏

问题背景在开发环境一直没有问题,但是到了生产环境,上线了显示白屏。检查了nginx配置以及web存放位置的对应关系都没有问题,结果打开控制台输出:UncaughtSyntaxerror:Unexpectedtoken?这个很明显是语法错误。但是在生产环境能使用,于是赶紧让同事检查了浏览器版本,结果是他那边浏览器的版本很低(谷歌76)导致的。问题原因:vite代码版本较高,导致低版本浏览器无法运行vite项目浏览器兼容性vue3打包后在低版本浏览器或webview中出现白屏,原因就是因为语法兼容问题。根据vite官方文档描述,build.target默认支持Chrome>=87、Firefox>

Vue3 更高效的构建工具——Vite

文章目录前言一、Vite简介1.Vite组成2.为什么选Vite?二、Vite的优缺点vite优点vite缺点三、使用Vite创建Vue3项目1.创建vite的项目2.项目的结构前言本文讲解了构建工具Vite,目前只有vue3才可以使用Vite,如果本文对你有所帮助请三连支持博主。下面案例可供参考一、Vite简介Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具,能够显著提升前端的开发体验。除了Vite外,前端著名的构建工具还有Webpack和Gulp。目前,Vite已经发布了Vite2,Vite全新的插件架构、丝滑的开发体验,可以和Vue3的完美结合。1.Vite组成一个开发服务器,

No known conditions for “.“ entry in “vite-aliases“ package解决

最近在学付金权老师的vite课,讲的颇为不错,可惜我现在不找工作,所以没法买面试题支持他咯,学到vite插件的vitealiases时,按照视频里的代码写了一下,yarndev后,发现报如下错误。我的vite.base.config.js(类似于vite.config.js,只是多写了基本配置和扩展配置,看过视频的都懂)import{defineConfig}from"vite"//import{ViteAliases}from"vite-aliases";import{ViteAliases}from'vite-aliases';//constpostcssPresetEnv=require

vue3创建项目,vite+js

之前的时候大哥就让我自己搭架子,但是我拖延症,现在用到了,得自己搭了我的项目都放到了VuePorjects这个目录里面,一、先进入到指定工作目录,(不是你要创建的项目的名称哈)cdVuePorjects/二、创建vue3项目,安装创建项目npmcreatevite@latest @latest是项目名称,可以自己修改项目名称,然后选择语言,选择vue,然后再选择js语言,我选的JavaScript,也可以选ts哈,看个人需求,等执行完了,出来下面的三个命令,  然后分别执行一下,最后执行完成,打开链接出现这个页面,就算简单的完成了,但是一个项目可不止这么点东西哈  项目创建成功,看下我们的目录

Vue3 + Vite + TypeScript + dataV 打造可视化大屏

前言网上有许多开源的可视化大屏项目,但是分析之后,还是想自己从0搭建一个可视化大屏项目,毕竟Vue一直在更新,自己搭建的可以使用最新版本的Vue,如果对版本没有太多要求的小伙伴们选择那些开源项目的基础上去修改也是很不错的。其次自己搭建一个项目,可以更好的了解具体的实现方式。当然这个项目中还是会引用一些组件库。创建Vue3+TypeScript+Vite项目这里就不过多去介绍了,创建项目大家都会,我这里就使用WebStorm去创建一个项目,node我选用18.6.0版本的项目创建好之后,我们先来引入一个组件库DataVVue3。这个组件库是在DataV的基础上重构的引入DataVVue3首先为什

Vue3 + Vite + TypeScript + dataV 打造可视化大屏

前言网上有许多开源的可视化大屏项目,但是分析之后,还是想自己从0搭建一个可视化大屏项目,毕竟Vue一直在更新,自己搭建的可以使用最新版本的Vue,如果对版本没有太多要求的小伙伴们选择那些开源项目的基础上去修改也是很不错的。其次自己搭建一个项目,可以更好的了解具体的实现方式。当然这个项目中还是会引用一些组件库。创建Vue3+TypeScript+Vite项目这里就不过多去介绍了,创建项目大家都会,我这里就使用WebStorm去创建一个项目,node我选用18.6.0版本的项目创建好之后,我们先来引入一个组件库DataVVue3。这个组件库是在DataV的基础上重构的引入DataVVue3首先为什

vue3 + vite + ts + element-ui搭建后台管理框架

vue3+vite+ts+element-ui搭建后台管理框架1、创建vue3项目搭建2、安装less、scss3、vite自动导入语法插件4、安装router5、安装pinia6、搭建后台系统--基本配置layout页面的搭建总结:1、创建vue3项目搭建vue3官网vue3官网vitevite官网连接npm安装//创建项目npmcreatevite@latest?Projectname:vue3_vite_project//输入项目名称按照提示输出即可!2、安装less、scssvite中使用less或scss安装后在style中设置对应的scss或less,推荐scss编译安装less依

vite.config.ts中的配置与打包

vite.config.ts中的build配置vite打包后发现所有的css,js,png等都在static文件夹内,配置vite.config.js实现分割代码并存于不同的文件中vite.config.ts中配置buildbuild:{rollupOptions:{output:{  //用于命名代码拆分时创建的共享块的输出命名chunkFileNames:'js/[name]-[hash].js',  //用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值entryFileNames:'js/[name]-[hash].js',  //用于输出静