vue项目 如何按照启动命令区分启动环境

在Vue项目中，可以通过设置不同的启动命令来区分不同的启动环境。以下是一种常用的方式：

1. 在项目的根目录下创建一个.env文件，文件名可以根据需要自定义，比如.env.development、.env.production等。
2. 在.env文件中，可以定义一些环境变量。例如：

# .env.development
VUE_APP_API_URL=http://localhost:3000

# .env.production
VUE_APP_API_URL=http://api.example.com

这里定义了一个名为VUE_APP_API_URL的环境变量，分别对应了开发环境和生产环境下的API URL。

3. 在package.json文件中的scripts部分，添加不同的启动命令。例如：

"scripts": {
  "serve:dev": "vue-cli-service serve --mode development",
  "serve:prod": "vue-cli-service serve --mode production"
},

这里添加了两个启动命令serve:dev和serve:prod，分别对应了开发环境和生产环境的启动。

4. 在代码中使用环境变量。在Vue组件或代码中，可以使用process.env来访问定义的环境变量。例如：

// 获取API URL
const apiUrl = process.env.VUE_APP_API_URL;

这样，在不同的启动环境下，apiUrl的值会根据对应的环境变量自动设置。

5. 运行启动命令。可以使用以下命令来启动不同的环境：

npm run serve:dev  // 启动开发环境
npm run serve:prod  // 启动生产环境

根据需要选择相应的启动命令来启动对应的环境。

以上就是一种按照启动命令区分启动环境的方式。通过设置不同的环境变量，可以方便地在不同的环境中配置不同的参数