vue3 uniapp vite 配置之定义指令

初遇你时动了情2025-04-17 18:47

动态引入指令

复制代码

// 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);
	debugger
	app.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"),
	//   },
	// }
})