前言
抽空整理练手项目升级后的一些坑点; 各位项目中有问题遇到困难也可以留言;我会尽快回复! 后续还会继续更新问题点!
1. 预处理器
安装sass以及配置全局scss
npm install node-sass
npm install sass-loader
node 版本不能过高; 目前成功版本为10.15.0; 可通过安装"n"来管理node版本
配置全局mixin.scss
根目录找到vite.config.js
// vite.config.js
import{defineConfig}from'vite';
importvuefrom'@vitejs/plugin-vue';
import{resolve}from'path';
// https://vitejs.dev
/config/exportdefaultdefineConfig({
plugins:[vue(),],
resolve:{
// 配置别名
alias:[{find:'@',replacement:resolve(__dirname,'./src')},
{find:'views',replacement:resolve(__dirname,'./src/views')},],},
css:{
// 添加全局
mixin.scsspreprocessorOptions:{scss:{additionalData:'@import "@/style/libs.scss";',},},},});
css参与计算 (内置模块)
原来的写法直接计算是不行的, 需要使用内置模块math.div()方法参与计算
libs.scss使用math 需要先声明使用; 添加在文件顶部@use"sass:math" 原来的写法border-width:$w/2; 新写法border-width:math.div($w/2)
新写法; 切记math需要声明使用(https://sass-lang.com/documentation/modules); 不然就会提示:
Error: There is no module with the namespace "math".
2. require 使用
问题: 想引入某个目录下的所有文件?
constfile=require.context('@/views/',true,/\.vue$/)
结果提示找不到名称“require”。是否需要为节点安装类型定义? 请尝试使用npm i --save-dev @types/node，然后将 “node” 添加到类型字段。
解决办法:
按照提示安装库
npm i --save-dev @types/node
然后在tsconfig.jsontypes字段中添加node; 然后重启一下; 就行了
// tsconfig.json{"compilerOptions":{"target":"esnext","module":"esnext","strict":false,"jsx":"preserve","moduleResolution":"node","types":["vite/client","node",],...}}}
3.别名配置
问题: 当你使用别名@, 你会发现别名框架并没有配置 会出现提示找不到模块“@/router/index”或其相应的类型声明
import router from '@/router/index';
解决办法:
在vite.config.js配置别名
// vite.config.js import{defineConfig}from'vite';importvuefrom'@vitejs/plugin-vue';import{resolve}from'path';// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),],resolve:{// 配置别名alias:[{find:'@',replacement:resolve(__dirname,'./src')},{find:'views',replacement:resolve(__dirname,'./src/views')},],},css:{// 添加全局mixin.scsspreprocessorOptions:{scss:{additionalData:'@import "@/style/libs.scss";',},},},});
很多人以为这样就结束了;在js 文件中确实就已经可以用了; 但是在.vue 文件中还是不行,其实还需要在tsconfig.json里面配置对应的别名; 详情见https://www.jianshu.com/p/1477b68b2d69
// tsconfig.json {"compilerOptions":{..."paths":{"@/*":["./src/*"],"views/*":["./src/views/*"],}}}
4.动态路由
问题:Invalid route component at extractComponentsGuards?这个问题不陌生吧!! 有俩个因素;
1. 如果你用JSON.stringify()转为string 后存储; 因为JSON.stringify()在序列化的过程中function、undefined、symbol这几种类型是不可枚举属性; 序列化后这个键值对会消失;addRoute()的时候就会发现没有这个component.
2. 使用component:()=>import('views/Order/index.vue')懒加载方式引入;也会提示Invalid route component;
tips: 调试路由时可通过router.getRoutes(); 查看动态路由是否已经完整注入进去
解决办法1. 使用Glob Import 动态导入
// src/mockjs/mock.routes.tsexportdefaultroutes=[{path:'/',name:'home',component:'views/Home/index.vue',meta:{// 页面标题title:'首页',// 身份认证userAuth:false,},},]
// src/router/index.ts
importroutesfrom"@/mockjs/mock.routes"
// 路由元信息
constmodules=import.meta.golb("../views/**/**.vue")
//使用golb ++
routes.forEach(item=>{router.addRoute("home",{path:item.path,name:item.name,meta:...item.meta,component:
//本地能使用，上生产直接GG//
()=>import(/* @vite-ignore */ `/@views/${itemRouter.component}`),
//使用modulesmodules
[/* @vite-ignore */`../views/${item.component}`],})})
解决办法2 : 在声明路由数据时使用 RouteRecordRaw; 下面是RouteRecordRaw`的注解
当用户通过routes option或者router.addRoute()来添加路由时，可以得到路由记录。 有三种不同的路由记录:
单一视图记录：有一个 component 配置
多视图记录 (命名视图) ：有一个 components 配置
重定向记录：没有 component或components配置，因为重定向记录永远不会到达。
// src/mockjs/mock.routes.ts
exportdefaultroutes:RouteRecordRaw[]=[{
path:'/',
name:'home',
component:component:()=>import("views/Home/index.vue"),
meta:{
// 页面标题
title:'首页',
// 身份认证
userAuth:false,
},
},
]
// src/router/index.ts importroutesfrom"@/mockjs/mock.routes"
// 路由元信息 确保自己的地址是否正确
routes.forEach(item=>{router.addRoute(item})})
5.pinia 使用以及动态路由持续存储踩坑
注释: pinia跟vuex一样也是一个基于vue的状态管理库; 使用pinia时,可以理解为它每一个store都是动态的、独立的; 不像vuex 一样可嵌套,因为没有modules!
pinia 使用:
npm install pinia
or
yarn add pinia
// src/store/index.ts
import{createPinia}from"pinia"
constpinia=createPinia()exportdefaultpinia
//main.ts ....importpiniafrom"./store/index"
createApp(App).use(router).use(pinia).mount('#app')
定义单个store
// src/store/createRouteInfo.ts
import{defineStore}from"pinia"importrouterfrom"
@/router/index"
// 封装的路由
// defineStore的第一个参数是应用程序中 store 的唯一id;这些注解官网都有
constuseStore=defineStore('useStore',{state:()=>({
routeModules:[],menu:[].....
}),
getterL:{routeModules:state=>
state.routeModules,menu:state=>
state.menu},
// 上面那俩个参数没变; 没有mutations!! actions类似于组件中methods,也可以定义一些业务逻辑;
actions:{addAsyncRoutes(routes){
// 业务逻辑
//设置动态路由
routes.forEach(el=>{router.addRoute(el)})}}})exportdefaultuseStore
使用useStore
// src/components/menu.vue
<scriptlang="ts"setup>
import useStore from "@/store/createRouteInfo"
import {storeToRefs} from "pinia"
const store = useStore()
// 使参数变为响应式
const {routeModules,menu} = storeToRefs(store)
onMounted(()=>{ getMenu() })
const getMenu = ()=>{ let result = getMenuData(params)
// set store value
store.$patch(state=>{ state.menu = result.data.menu }) }
</script>
<template>
<divclass="menu">
<ul><liv-for="li in menu":key="li.id">{{li.text}}</li></ul>
</div>
</template>
动态路由权限踩坑
很多人做动态路由时 数据存在store;页面刷新后页面空白或者进入404页面; 并且使用router.getRoutes() 查看新增的路由已经消失; 是因为store是存在浏览器的堆栈内存里面; 刷新后页面数据被释放掉; 那么如何解决呢? 想一想 页面刷新后我们的框架是会重新挂载的! so! main.js? 试试就试试!!!!
// src/store/asyncRoute.ts importroutesfrom"@/mockjs/mock.routes"
// 路由元信息
import useStorefrom"@/store/createRouteInfo"
// 封装的路由
conststore=useStore()const{role}=localStorage.getItem('user')||{}
// 是否已经登陆, 初级判断 可增加路由权限判断
if(role==='admin'){
// 此方法在 上面“定义单个store” createRouteInfo.ts 文件中定义了
store.addAsyncRoutes(routes)
}
// main.js.....import"./store/asyncRoute".....
createApp(App).use(router).use(pinia).mount('#app')
页面更新后提示报错信息:
问题: Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
什么意思呢? 你当前正在使用pinia; 但是pinia 还没有挂载成功!!!! what? 我使用vuex就不会这样呀!!!! 戏精
解决方案:
无意间在廖雪峰的官网看到过一句评论!!所谓的对象、函数在浏览器内存中就是一个地址;找个地址只想某个函数或者对象或者方法、谁拿到这个地址就拥有操作的权利; 所谓的函数作为参数传入别的函数; 其实就是把地址给了它; 让它拥有的操作的权利! 我觉得挺精辟!!
使用时引入pinia
// src/store/index.ts
import{createPinia}from"pinia"
constpinia=createPinia()exportdefaultpinia
//_______________分割线__________________ //
//src/store/asyncRoute.ts
importroutesfrom"@/mockjs/mock.routes"
// 路由元信息
importuseStorefrom"@/store/createRouteInfo"
// 封装的路由 importpiniafrom"./index"
// 引入pinia
conststore=useStore(pinia)
// 把pinia 传进去 就可以任意任意使用里面的属性了
const{role}=localStorage.getItem('user')||{}
// 是否已经登陆, 初级判断 可增加路由权限判断
if(role==='admin'){
// 此方法在 上面“定义单个store” createRouteInfo.ts 文件中定义了
store.addAsyncRoutes(routes)}
