### 在 VSCode 中配置 Flask 开发前端所需的环境 在 VSCode 中配置 Flask 开发前端所需的环境，需要完成以下内容的设置和操作： #### 1. 安装并配置虚拟环境 为了隔离项目的依赖包，推荐使用 `Pipenv` 创建虚拟环境。具体步骤如下： - 确保已安装 `Pipenv`[^1]。 - 在项目根目录下运行以下命令以创建虚拟环境： ```bash pipenv install flask ``` 此命令会自动创建虚拟环境并安装 Flask。 - 激活虚拟环境后，可以使用以下命令安装其他必要的依赖包（如 `python-dotenv` 用于管理环境变量）： ```bash pipenv install python-dotenv ``` #### 2. 配置环境变量 在 Flask 项目中，环境变量通常用于存储敏感信息（如数据库连接字符串、密钥等）。可以通过 `python-dotenv` 加载 `.env` 文件中的变量[^1]。 - 在项目根目录下创建一个 `.env` 文件，内容示例如下： ```plaintext FLASK_APP=app.py FLASK_ENV=development SECRET_KEY=mysecretkey DATABASE_URL=mysql+pymysql://root:root@127.0.0.1:3306/testmysql2?charset=utf8mb4 ``` - 在代码中加载 `.env` 文件的内容： ```python from flask import Flask from dotenv import load_dotenv import os load_dotenv() # 加载 .env 文件中的变量 app = Flask(__name__) app.config['SECRET_KEY'] = os.getenv('SECRET_KEY') app.config['SQLALCHEMY_DATABASE_URI'] = os.getenv('DATABASE_URL') ``` #### 3. 配置 VSCode 的 Python 解释器 - 创建虚拟环境后，在 VSCode 中选择正确的 Python 解释器。可以通过以下方式完成： - 打开命令面板（`Ctrl+Shift+P` 或 `Cmd+Shift+P`），输入并选择 `Python: Select Interpreter`。 - 从列表中选择由 `Pipenv` 创建的虚拟环境解释器[^1]。 #### 4. 安装 VSCode 插件 为了提升开发体验，建议安装以下插件： - **Python**：提供代码补全、调试支持等功能。 - **Flask Snippets**：提供 Flask 相关的代码片段。 - **ESLint** 或 **Prettier**：用于前端代码格式化。 - **Live Server**：实时预览前端页面。 此外，可以通过一键导入现有 IDE 配置的功能快速完成设置[^2]。 #### 5. 测试 Flask 应用 确保 Flask 应用能够正常运行： - 在项目根目录下运行以下命令启动应用： ```bash pipenv run flask run ``` - 如果一切配置正确，访问 `http://127.0.0.1:5000/` 即可看到应用运行界面。 #### 6. 数据库连接测试 如果需要连接数据库，可以参考以下代码测试连接是否成功[^3]： ```python from flask_sqlalchemy import SQLAlchemy from sqlalchemy import text db = SQLAlchemy(app) with app.app_context(): with db.engine.connect() as conn: rs = conn.execute(text("SELECT NOW()")) print(rs.fetchone()) ``` --- ### 注意事项 - 确保所有依赖包已正确安装。 - 在 `.gitignore` 文件中添加 `.env`，以避免敏感信息泄露。 - 如果使用代理网络，请确保代理设置正确。 ---