vite+vue3+ts框架搭建问题记录
404
按官网提示执行npm init vite@latest报错
node版本太低，更新node版本即可，window不能使用命令行更新，重新下载node安装包。
下载地址用下载 | Node.js 中文网更快
vite创建的vue项目没有内置依赖，自己安装依赖
npm install axios vue-router vuex element-plus
npm install eslint eslint-plugin-vue sass unplugin-auto-import unplugin-vue-components -D
配合别名报错 找不到模块 “path“ 或其相对应的类型声明
解决方式：npm install @types/node -D
使用时 找不到模块“@/store”或其相应的类型声明 配置两个地方
// vite.config.js
resolve: {
alias: {
'@': resolve(__dirname, './src')
}
},// tsconfig.json
"paths": {
"@/*": [ "src/*" ],
},最关键的在于如果还报错，重启vscode。
使用vue3后 vetur的支持不太好，没有注册组件都会有提示报错，官网上有介绍应该使用volar插件，禁用vetur。
注册全局svg时，require.context('./ts', false, /\.ts$/);因为require为webpack的语法所有不能用了，import.meta.globEager()代替。最新的会报 “globEager”已弃用。根据importMeta.d.ts
interface ImportMeta {
url: string
readonly hot?: import('./hot').ViteHotContext
readonly env: ImportMetaEnv
glob: import('./importGlob').ImportGlobFunction
/**
* @deprecated Use `import.meta.glob('*', { eager: true })` instead
*/
globEager: import('./importGlob').ImportGlobEagerFunction
}用import.meta.glob('./svg/*.svg', { eager: true })代替。
因为之前是安装的最新版本的node 16.16.0。导致之前老项目启动报错，node-sass切为sass也是不行，会报sass-loader没有安装。附node-sass对应node版本查看。
经同事了解到可以用nvm做node版本控制，下面是nvm安装过程：
1. 首先要卸载电脑中已存在的node-不卸载会很麻烦配置，建议卸载
2. 下载nvm安装有说在C盘好，不用配置环境变量，有说在D盘好的，防止找不到nvm。目前安装在了C盘，环境变量省的配置了。
3. 按照官网命令安装node之前可以先配置settings.txt 文件 增加
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/否则可能下载失败 导致npm不能下载。不过手动下载放到node_module目录下也是可以的。
附nvm下载地址
https://github.com/coreybutler/nvm-windows/releases：Releases · coreybutler/nvm-windows · GitHub
附node官网nvm示例http://nodejs.cn/download/package-manager/#nvm
安装之后又遇到一些问题
npm 不能安装，网上查找修改路径nvm/node版本号/npm.cmd与npm为
但是还不好使，后查找有说升级版本相关博客链接
升级之后安装么得问题了。npm node明明安装了但是使用npm命令还是会报错，一般都是版本不对应的问题，来回切一下版本就可以了
ps:刚安装完使用nvm命令可能找不到，重启就好了。刚配置setting.txt可能不生效，重启就好了，解决问题的最快方式就是重启。
关于引入svg：
1. 安装插件 npm install vite-plugin-svg-icons -D
2. 配置svg缓存，配置完成的效果是审查元素可以看到页面引入了很多icon文件，vite.config.ts下
plugins: [
vue(),
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [resolve(process.cwd(), "src/icons")],
// 指定symbolId格式
symbolId: "icon-[name]",
}),
],3. 编写svg组件 Svg/Icon/index.vue
ps: 遇到手动下载有填充颜色的svg，currentColor不生效，看来是源码里的fill属性优先级更高，删除源码内fill即可
4. main.ts 引入svg和注册全局组件
import 'virtual:svg-icons-register'
import SvgIcon from '@/components/SvgIcon/index.vue'// svg组件
const app = createApp(App)
app.component('svg-icon', SvgIcon)5. 就可以开始使用了，比如文件下有一个名称为user的svg则页面中这么使用
附vite-plugin-svg-icons文档地址
404页面配置
带参数的动态路由匹配 | Vue Router
关于无法全局scss文件重置element-plus样式问题
element-plus 编写全局样式重置时发现权重总是没有element-plus自己的高，虽然自定义样式文件引入已经是在import "element-plus/dist/index.css"引入之后了。
解决办法：
增加一个父级选择器 #app{} 重置样式写入其中，治标办法。
vue报错： JSX 元素类型“ElButton”不具有任何构造签名或调用签名
原因是defineEmits的不规范使用，找了好久 没想到这个会影响上面的dom语法报错
5. 关于引用postcss-pxtorem 具体安装方法网上都有很多 也没有遇到什么问题、在搭配sass一起使用时会如果使用之前的语法::v-deep :deep {} sass运行还是能识别，但是postcss-pxtorem这玩意不识别，所以会出现使用不规范sass的文件无法转换rem的问题
关于实现动态路由页面404问题
在实现后端权限菜单时发现页面会跳转404页面、排查addRoutes已弃用使用addRoute添加路由，排查路由格式与component组件引入是否报错、采用es6的import不支持变量只能使用常量、排查后都没问题仍然跳转404，最后发现在router.js里还有静态添加的404 *捕获，导致页面还未访问动态路由就被404捕获，解决办法：删除静态404路由文件、在动态路由添加最后增加404路由。