《Vue项目开发实战》第一章：项目环境配置
系列文章
文章目录
目录
系列文章
文章目录
前言
资源来源
源码部署方式
安装插件
运行
调试与测试
参数文件
API地址调整
mock启动与禁用
前言
本项目是基于前期项目Vue3+TypeScript+ElementPlus和FASTAPI开发的API进行开发。
本文章重点介绍：
源码可从GitCode或Gitee获取。
部署时需创建指定目录并复制相关文件，通过npm安装插件后即可运行。
测试账号为admin/admin，支持本地调试。
配套资源包括Vue3开发教程和FASTAPI实战指南，助力开发者快速上手。
项目地址：GitCode/Gitee。
资源来源
Vue3+TypeScript+Element Plus开发
https://blog.csdn.net/sen_shan/category_12933362.htmlFASTAPI零基础入门与进阶实战https://blog.csdn.net/sen_shan/category_12950843.html
源码下载：
WechatMiniProgramWEB:vue web项目开发 - GitCodehttps://gitcode.com/sen_shan/WechatMiniProgramWEBWechatMiniProgramWEB: 专注于微信小程序与Web技术结合的开源项目，提供跨平台开发工具和组件，简化微信小程序的Web化过程，助力开发者高效构建应用。https://gitee.com/sen_shan/wechat-mini-program-webWechatMiniProgramAPI:微信API - GitCodehttps://gitcode.com/sen_shan/WechatMiniProgramAPIWechatMiniProgramAPI: 微信小程序API集合，提供便捷的接口调用方式，助力开发者高效构建功能丰富的小程序应用。https://gitee.com/sen_shan/wechat-mini-program-api
源码部署方式
从 GitCode 或 Gitee 下载源码后，在本地创建名为 wechat-mini-program-vue-web 的文件夹，将下载的项目中的 app 与 docs 文件夹复制到该目录下即可。
安装插件
打开命令提示符，进入 wechat-mini-program-vue-web\app 目录后执行 npm install 。
运行
在命令提示符，输入npm run dev
调试与测试
账号:admin
密码:admin
参数文件
在项目根目录分别创建 .env.development 、 .env.local 、 .env.production 、 .env.test 文件，将 .env 的内容复制到各文件中，并按实际环境调整配置。
API地址调整
修改.env.development中修改VITE_APP_API_URL与VITE_APP_API_KEY。
mock启动与禁用
1.在.env.development中新增VITE_APP_MOCK_ENABLED=false
2.在config\index.ts中增加 mockEnabled定义
// config/index.ts
// 小工具：把 "true" | "false" | "" | undefined 转成布尔
const bool = (key: string): boolean => import.meta.env[key] === 'true';const config = {// API 地址apiBaseUrl: import.meta.env.VITE_APP_API_URL || 'https://default.example.com/api',apiKey: import.meta.env.VITE_APP_API_KEY || 'ae139f8f6a8efc2a74a1e852c5cdaa43',mockEnabled: bool('VITE_APP_MOCK_ENABLED'),// 其他配置featureFlags: {newFeature: import.meta.env.VITE_APP_FEATURE_FLAG === 'true' || false,},};export default config;3、修改src\main.ts中调整，删除import './mock'，新增下面语句：
import defaultConfig from '../config/index.js'; // 相对路径
const mockEnabled = defaultConfig.mockEnabled;if (mockEnabled) {import('./mock').then(() => {console.log('Mock 已加载');});
}
4.结束程序重新npm run dev
输入账号：admin 密码：admin出现该用户不存在，说明正确连接切换
5.再调整VITE_APP_MOCK_ENABLED=true
输入账号：admin 密码：admin 直接进入home。