uni-app vuecli 创建的项目如何在cmd启动自定义的环境与命令？

在uni-app与Vue CLI结合的项目中，通过命令行（cmd）启动自定义的环境与命令通常涉及配置package.json中的脚本以及使用环境变量。以下是一个具体的实现案例，展示了如何在cmd中启动带有自定义环境变量的uni-app项目。

1. 配置package.json脚本

首先，在项目的根目录下找到并打开package.json文件。在scripts部分添加自定义启动脚本。例如，我们可以添加两个环境：development和production。

{
  "scripts": {
    "serve:dev": "cross-env NODE_ENV=development uni-app-cli serve",
    "serve:prod": "cross-env NODE_ENV=production uni-app-cli serve"
  }
}

注意：uni-app-cli serve是uni-app的启动命令，实际使用中可能需要替换为npm run dev或其他符合你项目配置的命令。这里假设uni-app-cli是一个全局安装的命令行工具，或者你需要调整路径以匹配你的本地环境。

2. 安装cross-env

由于Windows和其他操作系统对环境变量的处理方式不同，我们使用cross-env库来确保跨平台兼容性。

npm install cross-env --save-dev

3. 在项目中使用环境变量

接下来，在你的Vue组件或JavaScript文件中，你可以通过process.env.NODE_ENV访问这些环境变量。例如，在一个Vue组件中：

<template>
  <div>
    <p>Environment: {{ environment }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      environment: process.env.NODE_ENV
    };
  }
};
</script>

4. 启动项目

现在，你可以通过以下命令启动项目，并指定不同的环境：

# 启动开发环境
npm run serve:dev

# 启动生产环境
npm run serve:prod

5. 额外配置（可选）

根据你的项目需求，你可能还需要在vue.config.js或uni-app的配置文件中进行额外的环境配置。例如，设置代理、PWA配置等。

// vue.config.js 示例
module.exports = {
  devServer: {
    proxy: process.env.NODE_ENV === 'development' ? 'http://localhost:8080' : null
  },
  pwa: process.env.NODE_ENV === 'production' ? {} : false
};

通过上述步骤，你可以在cmd中轻松地启动带有自定义环境变量的uni-app项目。这种方法不仅提高了项目的灵活性，还使得开发和生产环境的配置更加清晰和易于管理。