ts+vue3+vite+pinia+vue-router 踩坑合集

Question

如题所述

Answer 1

npm install node-sass
npm install sass-loader

配置全局 mixin.scss
根目录找到 vite.config.js

解决办法:
按照提示安装库
npm i --save-dev @types/node
然后在 tsconfig.json types字段中添加node; 然后重启一下; 就行了

解决办法:
在 vite.config.js 配置别名

很多人以为这样就结束了;在js 文件中确实就已经可以用了; 但是在.vue 文件中还是不行,其实还需要在 tsconfig.json 里面配置对应的别名; 详情见 https://www.jianshu.com/p/1477b68b2d69

tips: 调试路由时可通过router.getRoutes(); 查看动态路由是否已经完整注入进去

解决办法1. 使用Glob Import 动态导入

解决办法2 : 在声明路由数据时使用 RouteRecordRaw ; 下面是 RouteRecordRaw 的注解

pinia 使用:
npm install pinia
or
yarn add pinia

定义单个store

使用useStore

动态路由权限踩坑

页面更新后提示报错信息:
问题: Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
什么意思呢? 你当前正在使用pinia; 但是pinia 还没有挂载成功!!!! what? 我使用vuex就不会这样呀!!!! 戏精

解决方案:

使用时引入pinia