当前位置：首页 > news >正文

vue3 uniapp vite 配置之定义指令

news 来源：原创 2025/6/17 17:50:04

动态引入指令

// src/directives/index.js
import trim from './trim';const directives = {trim,
};export default {install(app) {console.log('[✔] 自定义指令插件 install 触发了！');Object.entries(directives).forEach(([key, directive]) => {app.directive(key, directive);});},
};

自定义指令函数

// src/directives/trim.js
export default {beforeMount(el) {if (el.tagName === 'TEXTAREA' || el.tagName === 'INPUT') {el.addEventListener('blur', () => {el.value = el.value.trim();});}},
};

注册指令

import {createSSRApp
} from "vue";
import pinia from '@/stores'
import * as Pinia from 'pinia';
import App from "./App.vue";
import directives from '@/directives'export function createApp() {const app = createSSRApp(App);debuggerapp.use(pinia);app.use(directives);return {app,Pinia, // 此处必须将 Pinia 返回};
}

错误信息：[plugin:vite:vue] unknown directive {“type”:7,“name”:“trim”,“rawName”:“v-trim”,“modifiers”:[],“loc”:{“start”:{“column”:51,“line”:28,“offset”:722},“end”:{“column”:57,“line”:28,“offset”:728},“source”:“v-trim”}}

需要vite中配置>

好像Uniapp 官方不支持之定义指令
@vitejs/plugin-vue和@dcloudio/vite-plugin-uni只能存在一个也就是uniapp不支持？

import {defineConfig
} from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({transpileDependencies:['@dcloudio/uni-ui'],plugins: [vue({template: {compilerOptions: {directiveTransforms: {trim: () => ({props: [],needRuntime: true // 重点：告诉编译器这是运行时处理})}}}}),//	uni(),AutoImport({// 预设imports:['vue','uni-app']}),],css: {preprocessorOptions: {scss: {additionalData: `@use "@/static/css/compont.scss" as *;@use '@/static/iconfont/iconfont.css' as *;`,silenceDeprecations: ['legacy-js-api'],api: 'modern-compiler',},},
},resolve: {alias: {'@': path.resolve(__dirname, 'src')}}// 配置路径别名// resolve: {//   alias: {//     "@": resolve(__dirname, "src"),//   },// }
})