@sepveneto/mp-plugin-router-view

在小程序端实现vue-router的基本功能

限制

只能写在App.vue中，有且只能有一个<router-view />。

与常规vue2的写法类似，App.vue中只允许存在一个根节点。

快速开始

安装

npm i @sepveneto/plugin-mp-router-view
yarn add @sepveneto/plugin-mp-router-view
pnpm i @sepveneto/plugin-mp-router-view

使用

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('@sepveneto/plugin-mp-router-view/loader')
      .loader('@sepveneto/plugin-mp-router-view/loader')
      .options({ /* options */ })
      .end()
  }
}

为什么

虽然uniapp的v2版本是依赖webpack4/5进行构建，但是通过plugins注入的代码无法影响到uniapp的编译结果。因此参考uniapp-router-view-loader使用loader来实现vue2版本的代码注入。

// vite.config.ts
import PluginRouterView from '@sepveneto/plugin-mp-router-view/vite'

export default defineConfig({
  plugins: [
    PluginRouterView ({ /* options */ }),
  ],
})

Example: playground/

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('@sepveneto/plugin-mp-router-view/webpack')({ /* options */ })
  ]
}

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('@sepveneto/plugin-mp-router-view/webpack')({ /* options */ }),
    ],
  },
}

// esbuild.config.js
import { build } from 'esbuild'
import Starter from 'unplugin-starter/esbuild'

build({
  plugins: [Starter()],
})

开发

pnpm i

pnpm play # 测试插件效果