uniapp自动生成运行命令插件

1. 确保项目是基于 Vue CLI 创建的

@dcloudio/vue-cli-plugin-uni 插件需要项目是基于 Vue CLI 创建的。如果你的项目不是通过 Vue CLI 创建的，可能需要先迁移到 Vue CLI。

检查项目是否基于 Vue CLI

• 查看项目根目录是否有 vue.config.js 文件。

• 查看 package.json 中是否有 @vue/cli-service 依赖。

如果没有，你需要先将项目迁移到 Vue CLI。可以参考 Vue CLI 官方文档。

2. 安装 @dcloudio/vue-cli-plugin-uni 插件

在项目根目录下运行以下命令来安装插件：

bash

复制

npm install @dcloudio/vue-cli-plugin-uni --save-dev

或者使用 yarn：

bash

复制

yarn add @dcloudio/vue-cli-plugin-uni --dev

3. 运行插件安装后的配置

安装完成后，插件会自动运行一些配置脚本。如果没有自动运行，可以手动执行以下命令：

bash

复制

vue invoke @dcloudio/vue-cli-plugin-uni

这个命令会：

• 修改 vue.config.js 文件，添加 uni-app 的相关配置。

• 在 package.json 中添加 uni-app 的运行和构建命令。

4. 检查 vue.config.js 文件

安装完成后，确保 vue.config.js 文件中包含 uni-app 的配置。如果没有，可以手动添加以下内容：

javascript

复制

const UniApp = require('@dcloudio/vue-cli-plugin-uni')

module.exports = {
  configureWebpack: {
    plugins: [
      new UniApp()
    ]
  }
}

5. 添加运行和构建命令

在 package.json 的 scripts 字段中，添加 uni-app 的运行和构建命令。例如：

json

复制

{
  "scripts": {
    "dev:mp-weixin": "uni build -p mp-weixin --watch", // 运行微信小程序开发环境
    "build:mp-weixin": "uni build -p mp-weixin", // 构建微信小程序生产环境
    "dev:h5": "uni build -p h5 --watch", // 运行 H5 开发环境
    "build:h5": "uni build -p h5", // 构建 H5 生产环境
    "dev:app": "uni build -p app-plus --watch", // 运行 App 开发环境
    "build:app": "uni build -p app-plus" // 构建 App 生产环境
  }
}

6. 运行项目

安装完成后，你可以使用以下命令运行或构建项目：

• 运行微信小程序开发环境：

  bash

  复制

  npm run dev:mp-weixin

• 构建微信小程序生产环境：

  bash

  复制

  npm run build:mp-weixin

• 运行 H5 开发环境：

  bash

  复制

  npm run dev:h5

• 构建 H5 生产环境：

  bash

  复制

  npm run build:h5

7. 注意事项

• 如果你之前是通过 HBuilderX 创建的项目，可能需要手动迁移到 Vue CLI。

• 确保项目中已经安装了 @vue/cli-service 和 @dcloudio/uni-migration（如果需要迁移）。

• 如果你遇到问题，可以尝试删除 node_modules 和 package-lock.json，然后重新安装依赖：

  bash

  复制

  rm -rf node_modules package-lock.json
  npm install