When extneding an existing native WeChat Mini Program (using WXML, WXSS, JS, JSON) with new features under tight deadlines, MPVue offers a practical solution. Here's how to integrate an MPVue-built subpackage into a native mini program architecture.

Project Structure Overview

The recommended approach involves placing both the MPVue project and native mini program in the same root directory. The build output from MPVue should be configured to generate in the native program's directory structure.

Webpack Configuration Adjustments

Modify the build settings in mpvue/config/index.js to control the output location:

module.exports = {
  build: {
    env: require('./prod.env'),
    assetsRoot: path.resolve(__dirname, '../../native-app/register-module'),
    assetsSubDirectory: 'static-assets',
    assetsPublicPath: '/register-module',
    productionSourceMap: false
  },
  dev: {
    env: require('./dev.env'),
    assetsSubDirectory: 'static-assets',
    assetsPublicPath: '/register-module',
    cssSourceMap: false
  }
}

Key configuration points:

• assetsRoot directs output to the native program directory
• assetsSubDirectory names the static resources folder
• assetsPublicPath sets the base path for asset references

Mini Program Configuraton

After building, udpate app.json to include the MPVue components as a subpackage:

{
  "subPackages": [
    {
      "root": "register-module/",
      "pages": [
        "pages/home/main",
        "pages/institution/main",
        "pages/new-institution/main"
      ]
    }
  ]
}

Common Issues and Solutions

If encountering resource loading errors like:

Missing static resource: static-assets/css/vendor.wxss

This typically requires patching the webpack asset plugin. Locate the MPVue asset plugin in node_modules and ensure it properly handles cross-directory builds by respecting the assetsPublicPath configuration.