把准备好的代码导入到在vscode IDE里

选择自己的本地代码根文件夹后如下图所示

项目目录结构

.
├── .github # github workflows 相关
├── .husky # husky 配置
├── .vscode # vscode 配置
├── mock # 自定义 mock 数据及配置
├── public # 静态资源
├── src # 项目代码
│   ├── api # api接口管理
|   |── axios # axios配置
│   ├── assets # 静态资源
│   ├── components # 公用组件
│   ├── constants # 存放常量
│   ├── hooks # 常用hooks
│   ├── layout # 布局组件
│   ├── locales # 语言文件
│   ├── plugins # 外部插件
│   ├── router # 路由配置
│   ├── store # 状态管理
│   ├── styles # 全局样式
│   ├── utils # 全局工具类
│   ├── views # 路由页面
│   ├── App.vue # 入口vue文件
│   ├── main.ts # 主入口文件
│   └── permission.ts # 路由拦截
├── types # 全局类型
├── .env.base # 本地开发环境 环境变量配置
├── .env.dev # 打包到开发环境 环境变量配置
├── .env.gitee # 针对 gitee 的环境变量 可忽略
├── .env.pro # 打包到生产环境 环境变量配置
├── .env.test # 打包到测试环境 环境变量配置
├── .eslintignore # eslint 跳过检测配置
├── .eslintrc.js # eslint 配置
├── .gitignore # git 跳过配置
├── .prettierignore # prettier 跳过检测配置
├── .stylelintignore # stylelint 跳过检测配置
├── .versionrc 自动生成版本号及更新记录配置
├── CHANGELOG.md # 更新记录
├── commitlint.config.js # git commit 提交规范配置
├── index.html # 入口页面
├── package.json
├── .postcssrc.js # postcss 配置
├── prettier.config.js # prettier 配置
├── README.md # 英文 README
├── README.zh-CN.md # 中文 README
├── stylelint.config.js # stylelint 配置
├── tsconfig.json # typescript 配置
├── vite.config.ts # vite 配置
└── uno.config.ts # unocss 配置

IDE里启动项目

点击Terminal下面的New Terminal就会启动一个终端

在终端里使用命令启动项目

pnpm run dev

在终端里出现类似如下的内容，就可以在浏览器中输入local地址观察内容了

修改项目成固定自定义端口

在项目根目录下找到vite.config.ts文件并修改server标签下的port数值

注意：这个是本地开发的端口，等讲解发布的时候再详细介绍，如果端口末尾是0，启动端口会自动加1（很奇怪的问题）

再浏览器输入http://localhost:9801得到如下图所示

环境变量配置

项目的环境变量配置位于项目根目录下的，这里主要配置四个个环境变量，分别为：

在开发调试的时候，会读取 .env.base 里面的数据。其他环境亦是如此，根据打包命令的不同，来读取不同的环境变量。

也许你会疑惑，为什么会有多个环境变量？

以 生产环境 为例，当我们执行 pnpm run build:pro 时，输出的包是用于线上环境的，所以代码都应该是压缩，我们需要删除掉代码中的 console.log 和 degubber，保证打包后代码的整洁度和不可见性。而其他环境，所以应该保留 console.log 和 degubber 用于调试，这样才能快速定位到问题所在。

所以环境变量的作用就是为了，在不同环境下有不同的表现。

提示

  • 只有以 VITE_ 开头的变量会被嵌入到项目中，你可以项目代码中这样访问它们：
console.log(import.meta.env.VITE_APP_TITLE)

配置项说明

.env.base

本地开发环境适用

# 环境
NODE_ENV = development

# 接口前缀
VITE_API_BASEPATH = base

# 打包路径
VITE_BASE_PATH = /

# 标题
VITE_APP_TITLE = ElementAdmin

.env.dev

开发环境适用

# 环境
NODE_ENV = production

# 接口前缀
VITE_API_BASEPATH = dev

# 打包路径
VITE_BASE_PATH = /dist-dev/

# 是否删除debugger
VITE_DROP_DEBUGGER = false

# 是否删除console.log
VITE_DROP_CONSOLE = false

# 是否sourcemap
VITE_SOURCEMAP = true

# 输出路径
VITE_OUT_DIR = dist-dev

# 标题
VITE_APP_TITLE = ElementAdmin

.env.test

测试环境适用

# 环境
NODE_ENV = production

# 接口前缀
VITE_API_BASEPATH = test

# 打包路径
VITE_BASE_PATH = /dist-test/

# 是否删除debugger
VITE_DROP_DEBUGGER = false

# 是否删除console.log
VITE_DROP_CONSOLE = false

# 是否sourcemap
VITE_SOURCEMAP = true

# 输出路径
VITE_OUT_DIR = dist-test

.env.pro

生产环境适用

# 环境
NODE_ENV = production

# 接口前缀
VITE_API_BASEPATH = pro

# 打包路径
VITE_BASE_PATH = /

# 是否删除debugger
VITE_DROP_DEBUGGER = true

# 是否删除console.log
VITE_DROP_CONSOLE = true

# 是否sourcemap
VITE_SOURCEMAP = false

# 输出路径
VITE_OUT_DIR = dist-pro

# 标题
VITE_APP_TITLE = ElementAdmin

修改项目名称

在项目根目录下找到如下相应的配置文件

只需要修改项目配置项中的VITE_APP_TITLE = ElementAdmin 选项，我们可以修改为我们需要的名字，我们只在.env.base 配置里做演示，其他环境配置是一样的

# 环境

VITE_NODE_ENV=development

# 接口前缀

VITE_API_BASE_PATH=


# 打包路径

VITE_BASE_PATH=/


# 标题

VITE_APP_TITLE=二次开发测试


# 是否全量引入element-plus样式

VITE_USE_ALL_ELEMENT_PLUS_STYLE=true



# 是否开启mock

VITE_USE_MOCK=true

# 是否使用在线图标

VITE_USE_ONLINE_ICON=true

# 是否隐藏全局设置按钮

VITE_HIDE_GLOBAL_SETTING=false

保存后项目会自动重启生效，我们只需要在浏览器中刷新以下就可以看到修改的效果了

登录后效果

删除页面启动时的提示

当我们启动页面的时候，页面上面会有一个没有用提示如图

如果想要删除这个提示需要以下操作

找到文件src/App.vue

在文件里注释掉提示 的代码如下图所示

注释后我们再进入系统页面的时候就没有了提示框，如图所示

# elementui # 前端
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

2026最新AI Agent高频面试题（分类型精简详解）

本文梳理AI Agent高频面试考点，覆盖基础概念、架构、推理规划、工具调用、记忆、RAG融合、多智能体与工程落地。区分Agent、Workflow与普通工具调用，讲解ReAct、Plan‑and‑Execute等主流范式，分析三级记忆机制与上下文溢出的解决办法，对比传统RAG与Agent‑RAG差异，介绍多智能体协作模式。同时总结落地痛点、优化手段和安全风控要点，划分初/中/高级面试复习重点，可

avatar AI Agent技术社区
cover

深入理解 AI Agent · AGENT #03：从单 Agent 到多 Agent

avatar AI Agent技术社区
cover

AI Agent安全风险启示：工业巡检机器人的AI安全管控

avatar AI Agent技术社区