前言这篇笔记是对渡一教育网课的知识点总结，源视频👉静态资源的动态访问【渡一教育】。静态资源与打包规则Vite脚手架在打包代码的时候，会把源代码里对于静态资源的访问路径转换为打包后静态资源文件的路径。主要的区别是文件指纹，即打包后的文件会带上一个hash值，用于区分不同版本的文件。文件指纹的作用：客户端会缓存文件。当前端项目更新之后，重新打包、部署，由于文件指纹的存在，客户端检测到文件名不同，则会下载新版的文件。如果没有文件指纹，且新旧版文件名一致，客户端会读缓存，而不能及时地拿到新版文件。动态访问静态资源动态访问静态资源通常导致读取不到文件，因为源代码中使用的路径是src中的，而打包之后静态资

前言上回说到，利用vite加载不同mode下的配置文件，可以实现不同运行环境下的参数配置。在前端应用中经常使用到Websocket，其地址同样可以在.env中间中配置。代码vite.config.ts代码的执行是在createApp之前，不可以在vite.config.ts中使用例如pinia、router等组件。可以使用import.meta.env获取配置文件中的参数废话少说，直接上代码。前端.env.development#开发环境配置NODE_ENV='development'#本地服务端口VITE_PORT=8093.......#Websocket服务地址VITE_WS_URL='

vue3+vite+typescript出现doesnotprovideanexportnamed‘xxx’解决方法。在使用TinyMCE富文本组件时，出现以下错误：Therequestedmodule‘/src/main/ts/components/EditorPropTypes.ts?t=1674647216370’doesnotprovideanexportnamed‘IPropTypes’。对应EditorPropTypes.ts中的代码：exportinterfaceIPropTypes{apiKey:string;cloudChannel:string;id:string;init

步骤根目录新建.env.development和.env.production文件package.json配置启动参数vite命令启动项目时，指定mode参数，加载vite.config.ts文件。"dev":"vite--host0.0.0.0--port8093--modedevelopment","prod":"vite--port8093--host0.0.0.0--modeproduction","build:dev":"vue-tsc--noEmit-ptsconfig.vitest.json--compositefalse&&vitebuild--modedevelopment"

文章目录⭐前言💖vue3系列文章⭐自动化配置路由💖引入vite版本自定义目录映射💖自动化读取文件下的路由💖main入口加载路由💖入口app.vue配置💖layout基础布局配置💖效果⭐总结⭐结束⭐前言大家好，我是yma16，本文分享关于前端vite+vue3——自动化配置路由布局。背景在inscode写了一个前端vite+vue3+js的项目，路由分配有点乱，现在给这个项目做个优化，路由配置。没有配置路由之前的前端界面。改造之后viteVite是一种基于公有链技术的快速、安全和可扩展的开源区块链项目。它旨在通过使用异步交易模型和基于状态的共识算法来提高区块链的性能和可扩展性。Vite的发展可以

vue3.3-Mobile-template基于Vue3.3+TS+Vant4+Vite5+Pinia+ViewPort适配+Sass+Axios封装+vconsole调试工具，搭建的H5移动端开发模板，开箱即用的。环境要求：Node:16.20.1pnpm:8.14.0必须装上安装pnpm，没装的看这篇文章https://blog.csdn.net/Steven_Son/article/details/135151622代码管理工具推荐用：sourceTree项目预览项目结构learn-vite--UI主目录├──dist打包后自动生成的文件夹├──public--静态资源├├──favic

学习使用vite+vue3的所遇问题总结（2024年2月1日）组件中使用标签忘记加setup这会导致Navbar没有暴露出来，导致使用不了，出现以下报错这是因为，如果不用setup，就得使用exportdefault……setup是后者的语法糖在Vue.js中，你可以通过route对象来接收从router-link传递过来的参数。具体来说，你可以使用route对象的params属性来获取路由参数。通过传递的参数，都需要设置到路由中，否则会丢失参数vite/vue3/vue-router/vuex已经整体上掌握，开始复习ES6（2024年2月2日）学习资料来源：菜鸟教程let和const命令。l

初识vite前言：最近项目要从vue2.x迁移到vue3，于是借此机会打算重构整个项目。在搭建项目的时候发现vue3更新了构建方式，放弃了webpack，使用了新的构建机制vite。再经过一番了解后发现vite借助了esbuild与rollup。vite开发大致分两个阶段开发阶段：vite采用no-bundle的方式,借助现代浏览器支持了esmodule的能力，在开发阶段项目无需打包即可运行调试，这让开发编译速度得到很大提升。生产阶段：为了在生产环境中获得最佳的加载性能，不能完全no-bundle，且由于rollup对于代码的tree-shaking和ES6模块有着算法优势上的支持，项目只需要

启动项目通过本地ip的方式访问方式一.通过修改package.json"scripts":{"dev":"vite--host0.0.0.0",},方式二.通过修改vite.config.tsexportdefaultdefineConfig({plugins:[vue(),vueJsx()],server:{//配置host与port方式host:"0.0.0.0",port:8000,},resolve:{alias:{"@":fileURLToPath(newURL("./src",import.meta.url)),},},});以上便是此次分享的全部内容，希望能对大家有所帮助!

创建项目我在这里直接是通过vite提供的默认模板来创建一个vue3 +ts的项目。这里可以cmd，然后npm-v来查看版本。#如果npm的版本是6.x版本，则使用下面这条命令创建项目yarncreatevite@latestvite-vue3-ts--templatevue-ts#如果npm的版本是7+以上版本，则使用以下命令yarncreatevite@latestvite-vue3-ts----templatevue-ts这样一个vue3+ts的项目就创建好了，使用vscode打开该项目，然后执行yarn安装依赖依赖安装完成后，执行  yarndev 启动项目就可以在浏览器中正常访问了。