uniapp配置自动导入uni生命周期等方法

前端小菜袅2025-10-14 12:14

目标效果

uniapp使用vue3时，可以配置vite.config.js实现自动导入onLoad等uni的方法

javascript 复制代码

<script setup>
  // 无需 import
  // import { onLoad } from "@dcloudio/uni-app"

  // 直接使用
  onLoad(()=>{
    console.log("onLoad,页面生命周期钩子");
  })
  onMounted(()=>{
    console.log("onMounted,组件生命周期函数");
  })
</script>

1. 安装自动导入插件 unplugin-auto-import

尝试时发现，无需先 npm i 初始化 npm，直接 npm install unplugin-auto-import 即可安装，若不行可先 npm i 初始化 npm。

bash 复制代码

npm install unplugin-auto-import

2. 新建vite.config.js并添加配置

配置后即可实现uni的自动导入

javascript 复制代码

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    uni(),        
    // 自动导入配置
    AutoImport({
      imports:[
        'vue',
        'uni-app'                
      ]
    })
  ]    
})