vite+vue3+ts框架搭建问题记录

原创已于 2023-06-07 09:31:17 修改 · 3.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #typescript #node.js

于 2022-08-19 14:29:13 首次发布

个人笔记专栏收录该内容

20 篇文章

订阅专栏

本文介绍了在Vue项目中遇到的多个问题及其解决方案，包括初始化错误、Node版本过低、模块找不到、SVG图标引入、Vetur与Volar插件切换、动态路由404、Element-Plus样式重置和JSX元素类型报错等。解决方法涉及更新Node版本、使用nvm管理、安装和配置插件以及修复代码错误。

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

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="symbolId"/>
  </svg>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

interface IProps {
    /** svg 的图标的名称 */
    iconClass: String
}
const props = defineProps<IProps>();
const symbolId = computed(() => `#icon-svg/${props.iconClass}`); // 缓存的svg Id就是这个格式的
</script>
<style scoped lang="scss">
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor; // currentColor为变量
  overflow: hidden;
}
</style>

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则页面中这么使用

<svg-icon icon-class="user" />

附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路由。