ldsy-uniapp-v3-vite-loader-inset

安装依赖

yarn add ldsy-uniapp-v3-vite-loader-inset

第二步 vite.config.js 注入 loader

import { defineConfig } from 'vite'
import vue3InsetLoaderPlugin from 'ldsy-uniapp-v3-vite-loader-inset'

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    sourcemap: process.env.NODE_ENV === 'development',
  },
  plugins: [
    // 注入loader，放在plugins的首位
    vue3InsetLoaderPlugin
  ],
})

第三步 pages.json 配置文件中添加 insetLoader

  "insetLoader": {
    "config": {
      "baseVue": "<baseVue ref='baseVue'></baseVue>"
    },
    "label": ["baseVue"]
  },

第四步 main.js

  全局引入通用组件（main.js）
  import baseVue from './components/baseVue.vue'
  
  const app = createSSRApp(App)
  app.component('baseVue', baseVue);

配置说明

• config (default: {}) 定义标签名称和内容的键值对
• label(default: []) 需要全局引入的标签，打包后会在所有页面引入此标签

✔ label 和 支持在单独页面的 style 里配置，优先级高于全局配置