编译阶段在 sfc 模板指定位置插入自定义内容,适用于 vite 构建的 vue 应用,常用于小程序需要全局引入组件的场景。(由于小程序没有开放根标签,没有办法在根标签下追加全局标签,所以要使用组件必须在当前页面引入组件标签)
因为 vue-inset-loader 不支持 vue3 + vite ,我就改了下,现在只支持 vue3 + vite 了
pnpm i strip-json-comments@3.1.1 @vue/compiler-sfc -D
import { defineConfig } from 'vite'
import vue3InsetLoaderPlugin from './plugins/vue3-inset-loader'
// https://vitejs.dev/config/
export default defineConfig({
build: {
sourcemap: process.env.NODE_ENV === 'development',
},
plugins: [
// 注入loader,放在plugins的首位
vue3InsetLoaderPlugin
],
})
"insetLoader": {
"config":{
"confirm": "<BaseConfirm ref='confirm'></BaseConfirm>",
"abc": "<BaseAbc ref='BaseAbc'></BaseAbc>"
},
// 全局配置
"label":["confirm"]
},
"pages": [
{
"path": "pages/tabbar/index/index",
"style": {
"navigationBarTitleText": "测试页面",
// 单独配置,用法跟全局配置一致,优先级高于全局
"label": ["confirm","abc"]
}
},
]
全局引入通用组件(main.js)
import XToast from './components/XToast/index.vue'
const app = createSSRApp(App);
app.component('x-toast', XToast);
-
config
(default:{}
) 定义标签名称和内容的键值对 -
label
(default:[]
) 需要全局引入的标签,打包后会在所有页面引入此标签
✔ label
和 支持在单独页面的 style 里配置,优先级高于全局配置