如何给Vue项目添加CodeSandbox服务器控制面板及管理密钥/隐藏Token？

• 打开你的Vue CodeSandbox项目，点击左侧边栏的服务器图标（或顶部菜单的「Server」选项）
• 首次启用时，选择匹配的服务器环境（如Node.js，适配Vue项目常用的后端场景）
• 创建服务器入口文件（比如server.js），在CodeSandbox的项目配置中指定该文件为服务器启动入口
• 启动服务器后，即可在控制面板中查看运行日志、重启服务、管理端口映射等操作
• 前端请求后端接口时，使用CodeSandbox分配的服务器域名（格式类似https://{你的沙箱ID}.csb.app）作为请求前缀

添加密钥步骤 #

• 打开项目左侧边栏的**秘密（Secrets）**选项（或进入项目设置找到「环境变量/秘密」板块）
• 点击「添加秘密」，输入密钥名称（建议遵循Vue项目规范，前缀用VUE_APP_，如VUE_APP_API_TOKEN；Vite项目则用VITE_前缀）和对应的Token值
• 确认添加后，密钥会自动作为环境变量注入到项目中

隐藏Token的方法 #

• 禁止将Token硬编码到代码文件中，也不要提交到版本仓库
• 全程使用CodeSandbox的Secrets功能存储密钥，该功能会自动隐藏敏感值，不会在代码预览、日志或公开项目中暴露
• 在Vue项目中通过process.env.VUE_APP_XXX访问环境变量；Vite项目则用import.meta.env.VITE_XXX
• 在项目设置中标记秘密为「私有」，仅项目所有者可查看和编辑

内容的提问来源于stack exchange，提问作者Spartak Borisov