常见问题

关于修改配置文件的问题

当修改 .env 等环境文件及 vite.config.js 文件时，vite 会自动重启服务。

自动重启有几率出现问题，请重新运行项目即可解决.

添加菜单后没显示

菜单必须和路由匹配才会显示在界面上，所以得确保菜单和对应的路由存在即可显示.

本地运行报错

由于 vite 在本地没有转换代码，且代码中用到了可选链等比较新的语法。所以本地开发需要使用版本较高的浏览器(Chrome 85+)进行开发

tab 页切换后页面空白

这是由于开启了路由切换动画,且对应的页面组件存在多个根节点导致的，在页面最外层添加<div></div>即可

错误示例

<template>
  <!-- 注释也算一个节点 -->
  <h1>text h1</h1>
  <h2>text h2</h2>
</template>

正确示例

<template>
  <div>
    <h1>text h1</h1>
    <h2>text h2</h2>
  </div>
</template>

组件命名问题

目前在 vite+vue3.0.5 版本中，如果组件命名携带关键字，则可能会导致内存溢出。例如 ImportExcel excel 导入组件。

我的代码本地开发可以，打包就不行了

目前发现这个原因可能有以下，可以从以下原因来排查，如果还有别的可能，可以提交 pr 来告诉我

使用了 ctx 这个变量，ctx 本身未暴露出在实例类型内，尤大也是说了不要用这个属性。这个属性只是用于内部使用。

import { getCurrentInstance } from 'vue';
getCurrentInstance().ctx.xxxx;

safari 问题

目前在 safari 上面本地开发运行样式会有问题，还未找到原因，有知道的也可以告诉我。

模版区别

v3-admin-template - 是包含 Demo 示例的,个人建议不要在这上面进行开发。当然，你如果动手能力强的话可以直接改。
v3-admin-slim 精简了代码后的模版项目。适合在这基础上进行二次开发。

环境问题

如果出现依赖安装报错，启动报错等。先检查电脑环境有没有安装齐全。

Node 版本必须大于16.13.1，推荐 22.11.0 版本。
Git

依赖安装问题

如果依赖安装不了或者启动报错可以先尝试删除 pnpm-lock 和 node_modules，然后重新运行 pnpm install
如果依赖安装不了或者报错，可以尝试切换手机热点来进行依赖安装。
如果还是不行，可以自行配置国内镜像安装。
也可以在项目根目录创建 .npmrc 文件，内容如下

# 默认的 npm包安装源 csde私库地址
registry=http://nexus.trinapower.com/repository/npm_group/
shell-emulator=true
auto-install-peers=true
strict-peer-dependencies=false

然后重新执行pnpm install等待安装完成即可

页面报错

当页面出现以下报错，是因为 /xxx 对应的路由组件内部出现了错误。

 Uncaught (in promise) Error: Couldn't resolve component "default" at "/xxx"

可以尝试从以下几点排查

检查对应组件内部 import 的所有文件是否正确
检查引入方式是否错误。

// 正确的
import { cloneDeep } from 'lodash-es';

// 报错
import _ from 'lodash-es';

检查样式是否使用变量及有没有引入对应的变量文件
检查代码明显的语法错误

这样就不会是使用的取值忘记 xxx.value 来进行数据获取