Day42:网易云项目,路由进阶

网易云项目

创建、启动项目并配置路由

npm init vite

npm i

npm i vue-router

npm i sass -D

在main.js中

import router from './router'
createApp(App).use(router).mount('#app')

在index中配置路由

import {createRouter,createWebHistory} from 'vue-router'
import Home from '../view/Home.vue'
import Search from '../view/Search.vue'
const router = createRouter ({history:createWebHistory(),routes:[{path:'/',name:'home',component:Home},{path:'/search',name:'search',component:Search}]
})
export default router

实现全局通用导航栏

写一个顶部的导航栏TopNav.vue在component文件夹中

<template><div class="top-nav"><div class="w content"><router-link to="/"><h1 class="logo"></h1></router-link><!-- 绑定一个导航,点击回到首页 --><div class="search-input"><input type="text" placeholder="请输入"v-model.trim="song"@keyup.enter="searchSong"/></div></div></div>
</template>
<script setup>import { ref } from "vue";import { useRouter } from "vue-router";const song = ref("")const router = useRouter()function searchSong(){router.push(`/search?song=${song.value}`)}
</script>
<style lang="scss" scoped>.top-nav {height: 70px;background-color: #242424;.content {display: flex;align-items: center;justify-content: space-between;h1 {width: 176px;height: 70px;background-image: url("https://s2.music.126.net/style/web2/img/frame/topbar.png?19dafe7dd55400ffec9b354833340e1f");background-position: 0 0;}.search-input {input {height: 40px;border-radius: 18px;padding: 5px 10px;outline: none;}}}}
</style>

useRoute和useRouter的区别,一个是获取全局路由,一个是获取当前页面的路由

在app中,将样式引入,并且去掉<style lang="scss" scoped>中的scoped,使导航栏能在全局应用

<template><div><top-nav/> <!-- 普通组件,不参与路由切换,是全局样式 --><router-view></router-view></div>
</template><script setup>
import TopNav from './components/TopNav.vue';
</script><style lang="scss">// scoped去掉,可以作为全局样式
* {padding: 0;margin: 0;box-sizing: border-box;
}
.w {width: 980px;margin: 0 auto;
}
</style>

获取axios请求的内容

在获取网易云数据的api中note app.js

在项目中

npm i axios

获取搜索的接口,放在search中,把连接板包裹在axios把获取的song.value拼接到链接后面,然后发axios请求

  const route = useRoute()const song = ref("")const lists = ref([])song.value = route.query.songaxios.get(`http://localhost:3000/search?keywords=${song.value}`).then((res) => {lists.value = res.data.result.songs})

查询到数据得到一个30长度的array

将array中需要的数据渲染到页面

<template><div class="search"><div class="w list"><ul><li v-for="(item, index) in lists" :key="item.id" :class="{ active: index % 2 === 1 }"><p>{{ item.name }}</p><span><span class="inner_span" v-for="_item, _index in item.artists" :key="_index">{{ _item.name }}{{ _index + 1 < item.artists.length ? "/" : "" }}</span></span><span>{{ item.album.name }}</span><span>{{ format(item.duration) }}</span><!-- 格式化毫秒 --></li></ul></div></div>
</template>

得到的歌手不换行,超出的部分省略号,给innerspan添加三个样式即可

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

给每个歌手添加后斜杠,如果索引值+1小于数组长度就加斜杠,如果索引值+1不小于数组长度就不加斜杠{{_index + 1 < item.artists.length ? "/" : ""}}

给li添加斑马条纹样式和鼠标hover样式

<style lang="scss" scoped>.search {background-color: #eee;.list {background-color: #fff;border-left: 1px solid #615f5f;border-right: 1px solid #615f5f;ul {list-style: none;padding: 20px;li {display: flex;align-items: center;padding: 12px;gap: 10px;&.active {background-color: #f9f5f5;}&:hover {background-color: #e0dbdb;cursor: pointer;}p {width: 40%;}& > span {flex: 1;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}}}}
</style>

定义方法format用来毫秒值转分秒

分钟和秒如果不足10需要在前面添加字符串0。如果秒只有一位,获取秒数时只截取一位,然后添加字符串0;如果多于10,则截取前两位,后面多余的不要。

<script setup>import { useRoute } from "vue-router";import { ref } from "vue";import { format } from "path";import axios from "axios";function format(duration) {//毫秒转分秒let mins = Math.floor(duration / 1000 / 60)// 如果只有个位数要补一个0在前面if (mins < 10) {mins = "0" + mins}// 获取秒let secs = (duration / 1000) % 60// 字符串截取if (secs > 10) {secs = String(secs).slice(0, 2)} else {secs = "0" + String(secs)[0] // 只有一位前面加零,后面只截取一位}return mins + ':' + secs}const route = useRoute()const song = ref("")const lists = ref([])song.value = route.query.songaxios.get(`http://localhost:3000/search?keywords=${song.value}`).then((res) => {lists.value = res.data.result.songs})
</script>

在search页面重新搜索

需要监听song,如果song变化,需要重新发送请求,再把参数传给lists

封装axios请求为方法init(song)

在第一次加载的时候先运行一次init(song.value)

需要监听route.query.song的变化,变化了重新执行init

route.query是一个响应式对象,但route.query.song是一个响应式对象里的值,如果要对这个值进行监听,需要写一个函数包装他,并返回值,这样就不会出现报错了

封装了之后,axios请求中包裹的动态字符中的.value需要删除,因为监听已经直接针对song

const route = useRoute()
const song = ref("")
const lists = ref([]) 
song.value = route.query.song
function init(song) {axios.get(`http://localhost:3000/search?keywords=${song}`).then((res) => {lists.value = res.data.result.songs})
}
init(song.value) // 第一次加载的时候执行
watch(() => route.query.song,(newValue) => {song.value = newValueinit(song.value)})

登录页面项目

  1. 在login页面设置登录按钮,如果点击则传isLogin为true到本地存储,表示已经登录
<template><div>this is login<button @click="login">login</button></div>
</template>
<script setup>
function login() {//登录身份信息(token信息)只要登陆了,就在本地存,且设置为truelocalStorage.setItem('isLogin',true)// 在本地存储中找,如果有该字段且为true,则认为登录
}
</script>
  1. 在进入任何页面(除开login之外),要做一个身份认证,如果已经登录,可以进入这个页面,否则进入login身份认证
<template><div><router-view></router-view></div>
</template>
  1. 在生命周期钩子函数router.beforeEach进入到每个页面之前,都要进行钩子函数触发,被称为全局的前置路由导航守卫。
  2. 如果进入的页面不是login,或者没有登录(isLogin不是true),则强制回到login
    1. router.beforeEach((to,from) => {})参数to代表去哪个页面,from表示从哪里来
    2. 此代码写在路由页面router
router.beforeEach((to,from) => {// 如果进入了页面不是login,或者isLogin不是true,则强制回到loginif(to.name !== 'login' && !localStorage.getItem("isLogin")){return {name: "login"}}
})

单个路由导航守卫

router是全局路由,如果想精细化定制不同页面的跳转效果,可以在路由导航列表的对象里面书写路由导航守卫

localStorage.getItem("isLogin")需要用JSON包裹,否则可能会出现不能识别的情况

{path: '/detail',name: 'detail',component: Detail,// 单个路由对象的前置导航守卫beforeEnter (to, from) {if (to.name !== "/login" && !JSON.parse(localStorage.getItem("isLogin"))) {return {name: "login"}}}
},

前置导航守卫可以设置单个,但后置导航守卫可以设置全局的

前置导航守卫可以写在router的全局、局部,或者写在组件内部。推荐写在router

组件内部写法

setup语法糖无法触发beforeRouteEnter钩子函数,需要写完整格式

<script>
/* import { onBeforeEnter } from "vue-router";
onBeforeEnter() */
export default {beforeRouteEnter (to, from) {console.log('beforeenter')}
}
</script>

离开当前路由时触发导航守卫

<script>// 离开当前路由时,触发一个导航守卫beforeRouteLeave (to, from) {let res = window.confirm('您是否想离开本页面')if(!res) {return false // 如果是false,则留在本页面}}
}
</script>

路由进阶

1.路由导航守卫

顾名思义,路由导航守卫可以让每个页面完成跳转前后进行一些逻辑实现。vue-router提供了多种导航守卫:全局的,单个路由独享的,或者组件级的。现在来逐一说明。

路由导航守卫的详细说明

1.1 全局前置守卫

你可以使用 router.beforeEach 注册一个全局前置守卫,这样在匹配每个路由路径的时候都会进行一次进入前的"拦截",在某些需要验证登录状态的业务场景下应用极广。

我们仍然用示例来演示全局前置守卫的使用:

现在有3个页面,分别是登录页,首页,列表页。进入任何页面前都需要进行身份验证,必须本地存储中isLogin的字段为true时才可以进入,否则统一回到登录页。按照之前学习的内容快速完成路由信息的相关配置。

在配置完路由信息后,通过router.beforeEach 注册一个全局前置守卫,其中的守卫方法接受2个参数

  • to:表示当前导航即将进入的页面
  • from:表示当前导航即将离开的页面

前置守卫中通过返回的路由对象实现重定向。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import Detail from '../components/Detail.vue'
import Login from '../components/Login.vue'const router = createRouter({history: createWebHistory(),routes: [{path: '/',name: 'home',components: Home,},{path: '/detail',name: 'detail',components: Detail,},{path: '/login',name: 'login',components: Login,},],
})
router.beforeEach((to, from) => {if (!localStorage.getItem('isLogin') && to.name !== 'login') {return {name: 'login',}}
})
export default router

在之前版本的路由中,还提供了第三个可选参数next,通过调用next方法也能进入到即将进入的路由页面,但新版本中不推荐这么做了。

1.2 全局后置守卫

和全局前置守卫类似,同样可以注册全局后置守卫,沿用上面的示例,在离开每个页面之前,都弹出一个提示框。

router.afterEach((to, from) => {alert('要离开此页面咯')
})

1.3 独享前置守卫

除了定义全局的路由守卫,还可以针对单个路由对象定义守卫:

{path: '/detail',name: 'detail',component: Detail,beforeEnter: (to, from) => {if (!localStorage.getItem('isLogin') && to.name !== 'login') {return {name: 'login',}}},
},

1.4 组件内部的路由守卫

除开在路由配置信息中定义导航守卫,还可以在组件内部定义守卫:

  • beforeRouteEnter 进入路由前调用
  • beforeRouteUpdate 动态参数改变时调用
  • beforeRouteLeave 离开路由前调用

2.路由元信息

meta叫路由元信息,可以存储当前路由对象的一些信息

可以将任意信息添加到路由对象上,比如页面标题,鉴权认证等,Vue中的路由提供了一个meta字段,可以通过给每个路由对象配置meta字段来添加信息。

{path: '/',name: 'home',component: Home,meta: {title: '首页',},
},

在组件的生命周期中,可以将meta信息合理地调用出来。

//Home中 组件挂载完毕后 将页面的标题内容改为meta中存放的信息
<script setup>import { onMounted } from 'vue'import { useRoute } from 'vue-router'onMounted(() => {document.title = useRoute().meta.title})
</script>

这里需要写setup语法糖,但是组件内守卫不要写。虽然最好也不要写组件内守卫啦

<script setup>import { onMounted } from 'vue'import { useRoute } from 'vue-router'const route = useRoute() // 最好写在外面,不要写在钩子里onMounted(() => {document.title = route.meta.title})
</script>

3.路由嵌套

某些复杂的组件关系存在层级更深的路由,这是可以利用路由嵌套来实现,给需要添加二级路由的路由对象添加children属性来配置二级路由,同样使用来渲染出口。

现在给Detail路由页面添加二级子路由,能够显示用户详情和头像详情,在对应的路由配置中添加children属性

// 不要忘记最上面的引入!!!
{path: '/detail',name: 'detail',component: Detail,meta: {title: '详情页',},children: [{ path: 'users', name: 'users', component: Users },{ path: 'profile', name: 'profile', component: Profile },],},

建立好对应的路由组件后,需要在Detail中添加二级路由的出口:

<template><h1>这是详情页</h1><router-link to="users"> <button>用户详情页</button></router-link><router-link to="profile"> <button>头像详情页</button></router-link><router-view></router-view> // 记得渲染出口
</template>

嵌套路由的使用规则跟一级路由保持一致,当然如果你的业务足够复杂,还可以嵌套三级,四级路由。

4.路由滚动行为

切换路由的过程中,VueRouter还提供了操作滚动条行为的方法,通过scrollBehavior方法可以在路由配置中规定滚动条行为

const router = createRouter({history: createWebHashHistory(),routes: [...],scrollBehavior (to, from, savedPosition) {// return 期望滚动到哪个的位置return {top:30 //滚动到距离顶部30}}
})

5.路由懒加载

当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效。

首页不用做懒加载,除开首页对所有的路由都使用动态导入。

Vue Router 支持开箱即用的动态导入,这意味着你可以用动态导入代替静态导入:

const Detail = () => import('../components/Detail.vue')const router = createRouter({// ...routes: [{ path: '/detail',name:'detail', component: Detail }],
})
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../view/Home.vue'
const router = createRouter({history: createWebHistory(),routes: [{path: '/login',name: 'login',component: ()=>import('../view/Login.vue'), // 改为懒加载meta: {title: '登录',},},

6.动态路由 (路由权限)

在登录页点击登录后,button新增了一个vip的button,可以进入vip页面。登录之后,才能在路由映射关系中加上vip对象(不能是控制按钮显示隐藏

对路由的添加通常是通过 配置routes来完成的,但是在某些情况下,你可能想在应用程序已经运行的时候添加或删除路由。例如在处理一些路由权限的场景下就需要动态增加路由。

6.1 增加路由

动态增加路由主要依靠router.addRoute()方法实现,获取到router实例后,可以在合理时机注册新的路由对象,

例如在登陆后新增一个Vip路由:

const login = () => {localStorage.setItem('isLogin', true)isVip.value = truerouter.addRoute({path: '/vip',name: 'vip',component: Vip,})
}

6.2 删除路由

动态删除路由最常用的方法是通过使用 router.removeRoute() 按名称删除路由,所以注册路由信息时添加name属性是一个好习惯,大家务必养成。

我们示例中登录退出希望将Vip路由删除掉:

const out = () => {localStorage.clear()isVip.value = falserouter.removeRoute('vip')
}

最终Login组件的页面代码会显得比较丰富完整:

<template><router-link to="/"><button>首页</button></router-link><router-link to="/detail"><button>详情页</button></router-link><router-link to="/vip" v-if="isVip"><button>Vip页</button></router-link><button @click="login">登录</button><button @click="out">退出登录</button>
</template><script setup>import { ref } from 'vue'import { useRouter } from 'vue-router'import Vip from '../components/Vip.vue'const router = useRouter()const login = () => {localStorage.setItem('isLogin', true)isVip.value = truerouter.addRoute({ // 登录成功后再添加路由映射关系path: '/vip',name: 'vip',component: Vip,})}const out = () => {localStorage.clear()// localStorage.removeItem('isLogin') //去掉登录身份信息isVip.value = falserouter.removeRoute('vip') // 退出登录后动态删除路由}let isVip = ref(localStorage.getItem('isLogin'))
</script><style></style>

6.3 查看当前路由

Vue Router 提供了两个功能来查看现有的路由:

  • router.hasRoute():检查路由是否存在。
  • router.getRoutes():获取一个包含所有路由记录的数组。
<template><div>this is login<button @click="login">login</button><button @click="logout">logout</button><button @click="$router.push('/')">首页</button><button @click="$router.push('/detail')">详情</button><router-link to="/vip" v-if="isVip"><button>Vip页</button></router-link></div>
</template>
<script setup>
import {onMounted,ref} from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import Vip from './Vip.vue'
const router = useRouter()
// 使用json包裹,使isVip的状态依靠isLogin的状态改变
const isVip = ref(JSON.parse(localStorage.getItem("isLogin")))
function login() {//登录身份信息(token信息)只要登陆了,就在本地存,且设置为truelocalStorage.setItem('isLogin',true) // 在本地存储中找,如果有该字段且为true,则认为登录isVip.value = true// 登录之后,才在路由映射关系中加上vip对象router.addRoute({path: '/vip',name: 'vip',component: Vip,})
}
function logout() {//去掉登录身份信息localStorage.removeItem('isLogin')isVip.value = false// 动态删除路由router.removeRoute("vip")
}
const route = useRoute() // 最好写在外面,不要写在钩子里
onMounted(() => {document.title = route.meta.title
})
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/134315.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【第200篇原创文章】解决低于1%概率出现的芯片VPSS模块跑飞的问题

在发布SDK内测的时候&#xff0c;我们发现在切换视频分辨率的时候有低概率出现VPSS模块跑飞的情况&#xff0c;概率低于1%&#xff0c;试个两三百次&#xff0c;能出1~2次。切换视频分辨率这个功能在安防产品上也确实存在需求&#xff0c;网络带宽不大好的地方分辨率可以适当下…

【LeetCode-面试经典150题-day24】

目录 35.搜索插入位置 74.搜索二维矩阵 162.寻找峰值 33.搜索旋转排序数组 35.搜索插入位置 题意&#xff1a; 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请…

Verdi实现信号的平移

在Verilog/System verilog中&#xff0c;# xxx可以实现延迟指定时间的功能&#xff0c;而在使用verdi查看信号波形并进行分析时&#xff0c;同样也可以实现类似的功能。 (注&#xff1a;这种信号平移是有其应用场景的&#xff0c;例如&#xff0c;在某些仿真模型中&#xff0c;…

【100天精通Python】Day63:Python可视化_Matplotlib绘制子图,子图网格布局属性设置等示例+代码

目录 1 基本子图绘制示例 2 子图网格布局 3 调整子图的尺寸 4 多行多列的子图布局 5 子图之间的共享轴 6 绘制多个子图类型 7 实战&#xff1a; 绘制一个大图&#xff0c;里面包含6个不同类别的子图&#xff0c;不均匀布局。 绘制子图&#xff08;subplots&#xff09;…

趣谈网络协议_1

趣谈网络协议_1 第1讲 | 为什么要学习网络协议&#xff1f;第4讲 | DHCP与PXE&#xff1a;IP是怎么来的&#xff0c;又是怎么没的&#xff1f;动态主机配置协议&#xff08;DHCP&#xff09; 第5讲 | 从物理层到MAC层&#xff1a;如何在宿舍里自己组网玩联机游戏&#xff1f;第…

C# 随机数生成 Mersenne Twister 马特赛特旋转演算法 梅森旋转算法

NuGet安装MathNet.Numerics 引用: using MathNet.Numerics.Random; /// <summary>/// 包括lower&#xff0c;不包括upper/// </summary>/// <param name"lower"></param>/// <param name"upper"></param>/// <para…

【深度学习】 Python 和 NumPy 系列教程(十一):NumPy详解:3、数组数学(元素、数组、矩阵级别的各种运算)

目录 一、前言 二、实验环境 三、NumPy 0、多维数组对象&#xff08;ndarray&#xff09; 多维数组的属性 1、创建数组 2、数组操作 3、数组数学 1. 元素级别 a. 直接运算 b. 加法&#xff1a;np.add()函数 c. 减法&#xff1a;np.subtract()函数 d. 乘法&#xf…

HarmonyOS/OpenHarmony应用开发-DevEco Studio新建项目的整体说明

一、文件-新建-新建项目 二、传统应用形态与IDE自带的模板可供选用与免安装的元服与IDE中自带模板的选择 三、以元服务&#xff0c;远程模拟器为例说明IDE整体结构 1区是工程目录结构&#xff0c;是最基本的配置与开发路径等的认知。 2区是代码开发与修改区&#xff0c;是开发…

Ubuntu下高效Vim的搭建(离线版)

软件界面 可以看到界面下方有一些常用提示信息&#xff1a;文件路径、format、文件类型、光标所在的坐标(x,y)、进度条(百分比)、日期时间 会提示已定义的变量名词(快速补全) 搭建方法 下载资源文件 把Vim 和 .vimrc 拷贝到家目录下&#xff0c;并执行tar -xvf Vim 即可。 …

【深度学习】Pytorch 系列教程(十四):PyTorch数据结构:6、模块(Module):前向传播

目录 一、前言 二、实验环境 三、PyTorch数据结构 0、分类 1、张量&#xff08;Tensor&#xff09; 2、张量操作&#xff08;Tensor Operations&#xff09; 3、变量&#xff08;Variable&#xff09; 4、数据集&#xff08;Dataset&#xff09; 5、数据加载器&#x…

CDH集群部署

文章目录 1. 资源准备2. 部署 Mariadb 数据库3. 安装CM服务4. 安装数据节点5. 登录CM系统 1. 资源准备 准备好CDH安装包资源&#xff0c;官方网站下载需要账号&#xff0c;如果没有账号可以去网上到处搜搜。主要涉及到的资源有&#xff1a; cloudera-manager-servercloudera-m…

虹科分享 | 软件供应链攻击如何工作?如何评估软件供应链安全?

说到应用程序和软件&#xff0c;关键词是“更多”。在数字经济需求的推动下&#xff0c;从简化业务运营到创造创新的新收入机会&#xff0c;企业越来越依赖应用程序。云本地应用程序开发更是火上浇油。然而&#xff0c;情况是双向的&#xff1a;这些应用程序通常更复杂&#xf…

SPF9139全力适配ios16与鸿蒙3.0,超实用数据提取、分析、恢复能力UP!

​ 如今&#xff0c;群聊已成为人们必不可少的沟通窗口 家人群&#xff0c;好友群&#xff0c;班级群 粉丝群&#xff0c;交友群&#xff0c;工作群 …… 各类群聊铺天盖地般涌来的同时 也有一些群聊沦为了 赌博、传播淫秽视频、发表不当言论 等违法犯罪行为滋生之地 与…

开源日报 0825 | 简化开发过程,提升Swift应用性能的扩展工具库

OpenZeppelin/openzeppelin-contracts Stars: 22.8k License: MIT OpenZeppelin Contracts 是一个用于安全智能合约开发的库。它建立在社区验证过的代码基础上&#xff0c;具有以下主要功能&#xff1a; 实现了 ERC20 和 ERC721 等标准。灵活的基于角色的权限控制方案。可重…

Jenkins :添加node权限获取凭据、执行命令

拥有Jenkins agent权限的账号可以对node节点进行操作&#xff0c;通过添加不同的node可以让流水线项目在不同的节点上运行&#xff0c;安装Jenkins的主机默认作为master节点。 1.Jenkins 添加node获取明文凭据 通过添加node节点&#xff0c;本地监听ssh认证&#xff0c;选则凭…

iOS系统暗黑模式

系统暗黑模式&#xff1a; 暗黑模式颜色适配&#xff1a; 方式1&#xff1a; Assets配置&#xff1a;在Assets中配置好颜色后&#xff0c;可以通过colorNamed: 放大获取到动态颜色。 方式2&#xff1a;代码配置&#xff0c;通过代码colorWithDynamicProvider: 可以看出来生成…

移动端H5封装一个 ScrollList 横向滚动列表组件,实现向左滑动

效果&#xff1a; 1.封装组件&#xff1a; <template><div class"scroll-list"><divclass"scroll-list-content":style"{ background, color, fontSize: size }"ref"scrollListContent"><div class"scroll…

arcgis实现矢量数据的局部裁剪

目录 环境介绍&#xff1a; 操作任务&#xff1a; 方法一&#xff1a;通过arcgis直接选取要素并保存出来 方法二&#xff1a;通过已知的经纬范围&#xff0c;掩膜获取该范围内的矢量数据 环境介绍&#xff1a; Windows操作系统、arcgis10.8 操作任务&#xff1a; 从整体的…

3ds max文件打包?max插件CG Magic一键打包整起!

3ds max文件如何打包&#xff1f;这个问题&#xff0c;小编听到不少网友的提问&#xff01; 今天CG Magic小编来和大家聊聊&#xff0c;文件更高效的操作&#xff0c;如何打包处理呢&#xff1f; 3DMAX这款软件的受众群体是比较高的&#xff0c;在工作方便的同时&#xff0c;…

uniapp h5 echarts 打包后图表点击失效/及其他失效

文章目录 期望效果实际效果环境引入echarts方式解决方法&#xff1a;注意 原因多说一句在h5打包的时候将 history 改为 hash 不然在浏览器打开后刷新会404 期望效果 实际效果 环境 pc端 window11 hbuilderx版本 3.8.12 echarts版本 5.4.3 引入echarts方式 npm install echar…