自动导入elementplus,配置会自动导入
然后就可以直接使用了，样式都不用额外导入，也不用在main.js中配置了
// 自动导入ElementPlus组件，除了图标需要单独引用外，其他的都可以直接在页面上使用组件，会自动导入 import AutoImport from "unplugin-auto-import/vite"; import Components from "unplugin-vue-components/vite"; import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
安装依赖项
npm install -D unplugin-vue-components unplugin-auto-import yarn add -D unplugin-vue-components unplugin-auto-import
依赖配置
plugins: [ //vue和jsx依赖项 vueJsx(), vue(), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ],
配置简写的文件引入
resolve: { alias: { // "@": fileURLToPath(new URL("./src", import.meta.url)), "@": path.resolve(__dirname, "src"), "@/assets": path.resolve(__dirname, "src/assets"), "@/components": path.resolve(__dirname, "src/components"), "@/images": path.resolve(__dirname, "src/assets/images"), "@/views": path.resolve(__dirname, "src/views"), "@/store": path.resolve(__dirname, "src/store"), "@/api": path.resolve(__dirname, "src/api"), }, },
全局引入less或者scss
// 全局引入less或者scss css: { //sourceMap: false, // css sourceMap 配置 preprocessorOptions: { less: { modifyVars: { hack: `true; @import (reference) "${path.resolve( "src/style/index.scss" )}";`, }, javascriptEnabled: true, }, }, },
打包项配置
//打包内容配置 build: { outDir: "dist", assetsDir: "assets", //指定静态资源存放路径 sourcemap: false, //是否构建source map 文件 terserOptions: { // 生产环境移除console compress: { drop_console: true, drop_debugger: true, }, }, },
引入第三方的配置
optimizeDeps: { include: [], },
配置代理
server: { https: false, // 是否开启 https open: false, // 是否自动在浏览器打开 cors: true, // 允许跨域 8月更新 port: 9527, // 端口号 host: "0.0.0.0", proxy: { "/api": { target: "", // 后台接口 changeOrigin: true, secure: false, // 如果是https接口，需要配置这个参数 // ws: true, //websocket支持 rewrite: (path) => path.replace(/^\/api/, ""), }, }, },
配置自动引入图标
注意：需要安装npm i unplugin-icons或者yarn add unplugin-icons
npm i unplugin-icons yarn add unplugin-icons
import Icons from "unplugin-icons/vite"; import IconsResolver from "unplugin-icons/resolver";
plugins: [ //vue和jsx依赖项 vueJsx(), vue(), AutoImport({ // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等 imports: ["vue"], resolvers: [ ElementPlusResolver(), // 自动导入图标组件 IconsResolver({ prefix: "Icon", }), ], }), Components({ resolvers: [ ElementPlusResolver(), // 自动注册图标组件 IconsResolver({ enabledCollections: ["ep"], }), ], }), // 图标 Icons({ autoInstall: true, }), ],
