MPX框架：从MPX-CLI v2迁移到v3的完整指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00881/article/details/148552903

MPX框架：从MPX-CLI v2迁移到v3的完整指南

mpx Mpx，一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架项目地址: https://gitcode.com/gh_mirrors/mp/mpx

前言

MPX框架作为滴滴开源的小程序开发框架，其命令行工具MPX-CLI在v3版本进行了重大架构升级。本文将全面解析从v2迁移到v3的关键步骤和注意事项，帮助开发者顺利完成迁移工作。

一、环境准备

首先需要更新全局安装的MPX-CLI工具：

npm install @mpxjs/cli@3.x -g

v3版本基于Vue CLI架构重构，提供了更好的插件化支持和配置管理能力。

二、配置迁移详解

1. 配置文件结构调整

v3版本对配置文件进行了整合和简化：

config/devServer.js → vue.config.js下的devServer
config/mpxPlugin.conf.js → vue.config.js下的pluginOptions.mpx.plugin
config/mpxLoader.conf.js → vue.config.js下的pluginOptions.mpx.loader

2. 配置示例

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  pluginOptions: {
    mpx: {
      srcMode: 'wx', // 指定源码模式
      plugin: {
        // 对应@mpxjs/webpack-plugin的配置
      },
      loader: {
        // 对应mpx-loader的配置
      }
    }
  },
  devServer: {
    // 开发服务器配置
  }
})

三、高级配置定制

v3版本提供了更灵活的配置方式：

1. 使用webpack-chain修改配置

// vue.config.js
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  chainWebpack(config) {
    // 添加新插件
    config.plugin('newPlugin').use(newPlugin, [params])
    
    // 修改已有插件配置
    config.plugin('mpx-webpack-plugin').tap(args => newArgs)
  }
})

2. 使用configureWebpack合并配置

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [new Plugin()]
  }
}

四、构建后处理方案

v3版本中构建后处理需要通过插件机制实现：

方案1：创建自定义插件

// vue-cli-plugin-mpx-build-upload/index.js
module.exports = function (api, options) {
  api.registerCommand('build:upload', function deploy(...args) {
    return api.service.run('build', ...args).then(() => {
      // 构建完成后执行上传逻辑
      uploadFile()
    })
  })
}

使用方式：