vue3 自动导入自己的js文件中的函数

vue3 自动导入自己的js文件中的函数

• vite.config.js

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia',
        {
          from: '@/utils/request.js',
          imports: ['http'],
        }
      ],
		
    }),

  ]


})

• request.js文件

import axios from 'axios'
import qs from 'qs'

import NProgress from 'nprogress' // 引入nprogress插件
import 'nprogress/nprogress.css' // 这个nprogress样式必须引入

axios.defaults.headers = { 'Content-Type': 'application/x-www-form-urlencoded' }
axios.defaults.baseURL = import.meta.env.VITE_APP_BASE_URL
const instance = axios.create({
  timeout: 60000
})

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    //form表单提交multipart/form-data的时候，不需要序列化参数
    if (config.method === 'post' && config.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
      // skipNulls: true 设置null值不转换成空字符串
      config.data = qs.stringify(config.data, { indices: false, skipNulls: true })
    }
    NProgress.start()
    
    return config
  },
  (err) => Promise.reject(err)
)
instance.interceptors.response.use(
  function (response) {
    NProgress.done()
    return response
  },
  function (error) {
    NProgress.done()
    
      return Promise.reject(error)
    
  }
)

export const http = instance

export default instance

• 这样在别的文件中就可以直接引用http，不需要import

<script setup>

let allData = ref([])
const getData = async () => {
  http.post('/api/data').then((res) => {
    allData.value = res.data
  })
}

getData()
</script>

<template>
  <div>test</div>

  <div class="chart">
    <MyChart2 :data="allData"></MyChart2>
  </div>
</template>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 400px;
}
</style>