vue的 环境怎么创建

### 创建和配置 Vue 开发环境

#### 安装 Node.js 和 npm
为了使用 Vue CLI 工具来创建项目，需要先安装 Node.js 及其包管理工具 npm。可以从官方网站下载最新稳定版的 Node.js，这会自动附带安装 npm。

#### 初始化新项目
通过命令行工具输入 `npm install -g @vue/cli` 来全局安装 Vue CLI[^1]。之后可以通过如下命令快速搭建一个新的 Vue 项目：

vue create my-project-name

此过程允许选择预设或手动挑选特性，比如 Babel、TypeScript 支持等。

#### 环境变量配置
对于不同的部署场景（如开发、测试、生产），可以在项目的根目录下定义多个 `.env` 文件用于区分不同模式下的配置项。例如，在开发环境中访问特定API接口时，可以设置相应的基础路径作为环境变量的一部分:

# .env.development
VUE_APP_BASE_API_D=http://localhost:8080/api/

这些自定义变量会在编译期间被注入到应用中，并可通过 `process.env.VUE_APP_*` 访问[^3]。

#### 修改 Axios 请求的基础 URL
为了让 HTTP 请求能够根据不同环境切换服务器地址，可在 axios 实例初始化的时候指定 `baseURL` 参数。这样做的好处是在调用 API 方法时不需每次都重复写完整的 URL 地址:

import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
});

当点击按钮触发函数 `TestBtn()` 后，将会打印当前所处的工作环境以及发起一次 GET 请求获取数据并显示响应结果:

methods: {
  TestBtn(){
    console.log('不同环境', process.env.VUE_APP_BASE_API_D);
    
    import("@/api/serveApi/development").then(development => {
      development.default().then(response => {
        console.log(response.data);
      });
    });
  }
}