vue3自动引入插件unplugin-auto-import （vite搭建项目，vue-cli搭建项目两种方式）-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3自动引入插件unplugin-auto-import （vite搭建项目，vue-cli搭建项目两种方式）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

插件地址：https://github.com/antfu/unplugin-auto-import

vue3+vite搭建项目
第一步：下载插件npm i -D unplugin-auto-import
第二步：插件配置

unplugin-auto-import/vite,vue,vite,vue.js,javascript,前端

//vite.config.js
import {
  defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from "unplugin-auto-import/vite"
let path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), AutoImport({
    imports:['vue','vue-router']//自动引入vue的ref、toRefs、onmounted等，无需在页面中再次引入
  })],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')//配置路径别名
    }
  },
  server: {//解决跨域问题
    port: 8090, // 端口
    proxy: {
      '/api': {
        target: 'http://192.168.25.133:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})

vue3+vite+ts搭建项目
第一步：下载插件npm i -D unplugin-auto-import
第二步：插件配置

unplugin-auto-import/vite,vue,vite,vue.js,javascript,前端

//vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import AutoImport from "unplugin-auto-import/vite";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router"], //自动引入vue的ref、toRefs、onmounted等，无需在页面中再次引入
      dts:"src/auto-import.d.ts" // 生成在src路径下名为auto-import.d.ts的声明文件
    }),
  ],
  resolve: {
    alias: { "@": path.resolve("./src") },
  },
  envPrefix: ["VITE_", "MXL_"], //暴露环境变量配置别名
  server: {//解决跨域问题
    port: 8090, // 端口
    proxy: {
      '/api': {
        target: 'http://192.168.25.133:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
});


vue3+vue-cli搭建项目
第一步：下载插件npm i -D unplugin-auto-import
第二步：插件配置，

unplugin-auto-import/vite,vue,vite,vue.js,javascript,前端

//vue.config.js
const {
    defineConfig
} = require('@vue/cli-service')
const {
    resolve
} = require('path')
module.exports = defineConfig({
    configureWebpack: {
        plugins: [
            require('unplugin-auto-import/webpack')({
                // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
                imports: ['vue', 'vue-router'],
                eslintrc: {
                    enabled: true, // <-- this
                },
            }),
        ],
    },
    transpileDependencies: true,
    chainWebpack: config => {
        // 别名设置
        config.resolve.alias
            .set('@', resolve('src'))
            .set('@assets', resolve('src/assets'))
            .set('@api', resolve('src/api'))
            .set('@components', resolve('src/components'))
            .set('@utils', resolve('src/utils'))
            .set('@views', resolve('src/views'))
})

如果安装了eslint，使用的ref、torefs等报错undefind如下图
unplugin-auto-import/vite,vue,vite,vue.js,javascript,前端
需在2个地方vue.config.js ，.eslintrc.js文件做配置

代码：文章来源地址https://www.toymoban.com/news/detail-647722.html

//vue.config.js
configureWebpack: {
        plugins: [
            require('unplugin-auto-import/webpack')({
                // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
                imports: ['vue', 'vue-router'],
                eslintrc: {
                    enabled: true, // <-- this
                },
            }),
        ],
    },

//.eslintrc.js
 extends: [
        'plugin:vue/essential',
        'airbnb-base',
        'prettier',
        'plugin:prettier/recommended', // 添加 prettier 插件,
        './.eslintrc-auto-import.json'
    ],

到了这里，关于vue3自动引入插件unplugin-auto-import （vite搭建项目，vue-cli搭建项目两种方式）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！