vue3 vite打包 动态路由

最新推荐文章于 2024-04-25 18:56:13 发布
最新推荐文章于 2024-04-25 18:56:13 发布
阅读量755 收藏 4
点赞数
分类专栏： Vue 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36164225/article/details/128951763
版权

vue3 vite打包 上传服务器获取 动态路由 失败

 引入 import.meta.glob

        const modulesR = import.meta.glob(`../views/**/*.vue`)

对以前的写法进行替换

 

替换后静态

 替换后动态

 即可消除提示

再次部署服务器成功获取路由

赛博绮梦：Bug编梦录
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+vite 组件打包
04-16
Vue3 和 Vite 的组件打包是一项关键的前端开发任务，它涉及到现代Web应用程序的构建流程。Vue3 是 Vue.js 框架的最新版本，带来了许多性能优化和新特性，如Composition API，而 Vite 是由 Vue.js 作者尤雨溪开发的...
vite2 + vue3构建多页应用-源码demo
10-15
3. **路由配置**: 如果使用Vue Router，需要为每个页面配置单独的路由，同时处理好页面之间的跳转。 4. **HTML模板**: 创建对应的HTML模板文件，通常一个页面对应一个HTML模板，模板中引入对应的JS和CSS资源。 5. **...
【Vue Router】016-路由懒加载
訾博（ZiBo）的博客
01-03 282
1.16 路由懒加载 这个是很有用的，之前使用 import 静态导入组件是一次性导入所有的组件，当用户打开网页的时候，会下载所有的组件，这样的话就会很耗时，影响用户体验！ 1.16.1 概述 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。 1.16.2 动态导入 Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入： // 将 // imp
vue3+vite打包配置，绝对路径改相对路径，更改静态资源目录
vayne_1的博客
05-26 1万+
vue3+vite打包配置，绝对路径改相对路径，更改静态资源目录
Vue3 使用vite打包时的动态路由
最新发布
lixu102593的博客
04-25 973
/ 刷新页面运行路由代码时要放在 app.use(router);// 引入 公共样式。// 获取views下的所有的vue文件。
vite+vue3分平台打包
u010994219的专栏
11-22 798
项目一套代码需要支持发多个国家，有多个测试服，一个开发服，直接production和development不大够，代码还需要根据不同地区给出不同需求。按照传参动态配置参数，在代码里面判断参数属于哪个平台，然后处理相应的逻辑。
vue3 + vite动态路由打包404，找不到路由
m0_52329085的博客
10-16 1182
本地npm run dev,路由加载正常，打包后，预览npm run preview时，就会出现下面问题。整理为需要的动态路由: 使用引入的 modules。在整理路由的位置引入。
vue3+vite 打包相对路径
weixin_44485192的博客
04-05 1万+
vue3+vite 打包配置相对路径 在 vite.config.js 下加上 base: ‘./’ 如下所示 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], base: './' }) ...
Vue3动态路由（Vite+Vue3+TS+Mock）
热门推荐
XUMENGCAS的博客
11-25 2万+
vue3动态路由的配置。
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...
解决使用vue.js路由后失效的问题
11-29
新学了vue.js中的路由 在之前写的vue的demo上加上了简单的路由例子(来自vue-router 2),但是加上点击后只有地址栏变化,内容并不变.且之前用jquery写的一些效果也失效了.最后找到原因是因为同一个id被启动了两次(第一...
vue+vite+ts.rar
08-11
Vue.js 是一款流行的前端...总的来说，"vue+vite+ts.rar"提供了一个现代的前端开发环境，结合Vue 3.0的优雅组件系统、Vite的高效构建流程以及TypeScript的类型安全，为开发者创造了一个高效、稳定的开发体验。
vue3+vite+vue-router实现动态读取文件夹名称和addRoute
Zhooson的博客
12-09 3514
获取文件夹名称及其component 动态加载到 router上。背景： 随着项目越来越大，项目路由会越来越多，导致我们每次需要到。方案：借助vite的新增。添加路由，非常的繁琐。
vue路由及打包部署
m0_61598337的博客
08-20 594
路由表主要记录hash（#号）与组件之间的对应关系。主要定义在router文件夹下的index.js},routes})若path值为/emp，则绑定的是../views/tlias/EmpView.vue，即为一条路由信息。Vue.use(VueRouter)使用vue路由，const routes = [{}]构建路由表，const router = new VueRouter({})实例化路由表对象。
vue3+vite中自动配置路由的神器：vite-plugin-pages
浩星
07-21 4563
在写vue3+vite组合的项目中，很多时候我们都需要配置本地路由，实际vite有个神器来提高效率，把配置本地路由的工作代替我们处理掉。
【vue3+vite+vue-router】动态引入某个目录下的文件自动生成路由
lcc0628的博客
02-07 3006
使用vite提供的import.meta.glob，对指定目录下的文件都可以自动引入作为子路由进行注册，文件名直接作为path和name（注意name不能重复，如果重复的话可以在前面或者后面添加一个字符串作为标识），免去了复杂繁琐的引入步骤。
Vite + Vue3 + Ts 解决打包生成的index.html页面 显示空白、报资源跨域、找不到资源、404-Page Not Found等错误
沐枫
01-04 2万+
Vite3 + Vue3 + Ts 解决打包生成的index.html页面显示空白、报资源跨域、找不到资源、404-Page Not Found等错误。 在用Vue3 + Ts进行项目开发，通过Vite进行构建打包后，直接在本地以文件系统的方式，用浏览器直接打开dist目录下的index.html文件访问时，浏览器页面显示空白、打开控制台后有报错、应该路径找不到对应的文件。
Vue3 vite vue-router4 动态路由router.addRoute()、import.meta.glob
黄彪博客
06-13 3516
使用Vite创建项目工程，将Vue3的一个知识点作为一个页面，但是发现随着学习的知识点增多，页面也越来越多，每个页面都要配置Vue-router 的路由信息，很繁琐，因此想能否根据文件夹的目录来配置路由。备注：** 如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。，猜想vite肯定也提供了类似的功能。，因此，要导入三个动态加载目录的文件。, 下面的代码是不支持的。
从0搭建Vue3组件库(五): 如何使用Vite打包组件库
JackChan
02-17 8272
从0搭建Vue3组件库(五): 如何使用Vite打包组件库
vue3 vite项目打包后预览白屏
07-28
这个问题可能由多种原因引起。以下是一些可能的解决方案： 1. 确保你在打包前进行了正确的配置。在 Vue 3 中，你可以使用 Vite 构建工具进行项目打包。确保你已经正确配置了 `vite.config.js` 文件，特别是 `base` 属性，以确保你的项目在预览时能够正确加载资源。 2. 检查浏览器控制台报错信息。打开浏览器的开发者工具，切换到控制台选项卡，查看是否有任何错误信息。这些错误可能会指引你找到问题所在。 3. 确保你的代码没有依赖于开发服务器。在开发过程中，Vite 提供了一个开发服务器来实时编译和热更新你的代码。但是在打包后，这个服务器不再存在，所以你需要确保你的代码没有依赖于这个服务器。 4. 检查你的路由配置。如果你在项目中使用了路由，确保你的路由配置正确，并且对应的组件和页面已经正确引入。 5. 检查资源路径。在打包后，资源文件的路径可能会发生变化。确保你的代码中引用的资源文件（如图片、样式表等）的路径是正确的。 6. 确认是否有使用第三方库或插件。有时候第三方库或插件可能与 Vue 3 不兼容，导致项目在打包后出现问题。尝试移除或更新这些库，看看是否有改善。 如果以上方法都没有解决问题，你可能需要进一步调试和排查。可以尝试在打包后的项目中逐步添加代码，以确定导致白屏的具体原因。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值