vite.config.ts配置之自动导入element-puls方式
作者：成序猿@
根据Elementplus UI 配置组件及样式的自动导入
自动导入推荐
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中
Vite
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})这样配置太过简单，你会发现目录会多出两个文件，auto-imports.d.ts和components.d.ts。
他们的作用就是不需要开发者手动导入，你所使用的组件库和依赖都会在这里看到。
如下components.d.ts文件。
如果只是以上简单的配置auto-imports.d.ts你会发现他是一个空文件，所以还需要你加配置，配置如下：
dts配置生成文件的路径，默认是根路径。
但是使用默认路径会存在问题，页面会报依赖未定义的错误，放到src下会解决这一问题。
如果不想放在src下，你可以修改tsconfig文件，
如下配置
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"src/style/blackTheme.scss"
]因为ts只配置了src下的.d.ts文件，自动生成的文件和sec同级所以报错，将src/**/*.d.ts改为**/*.d.ts即可
imports配置可以自动引入的依赖，我配置的是vue，vue-router，axios等，配置完成以后，他会将你配置的依赖显示到auto-imports.d.ts中，
同时设置vueTemplate:true，在页面使用（ref,reactive）时不在需要引入。
AutoImport({
resolvers: [ElementPlusResolver()],
dts: "src/auto-imports.d.ts",
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
/\.md$/, // .md
],
vueTemplate: true,
imports: [
"vue",
"vue-router",
"vue/macros",
// custom
{
"@vueuse/core": [
// named imports
"useMouse", // import { useMouse } from '@vueuse/core',
// alias
["useFetch", "useMyFetch"], // import { useFetch as useMyFetch } from '@vueuse/core',
],
axios: [
// default imports
["default", "axios"], // import { default as axios } from 'axios',
],
},
],
}),
Components({
// allow auto load markdown components under `./src/components/`
extensions: ["vue", "md"],
// allow auto import and register components used in markdown
include: [/\.vue$/, /\.tsx$/, /\.vue\?vue/, /\.md$/],
resolvers: [ElementPlusResolver()],
dts: "src/components.d.ts",
}),如果你想使用$ref也可以配置好，无需在自己引入了。
$ref定义的变量不需要.value哦
vue({
include: [/\.vue$/, /\.md$/],
// 可以使用$ref
reactivityTransform: true,
}),注意：
自动引入会出现一些样式的丢失，如：ElMessage、ElNotification等，解决方法如下，在vite.config.ts中进行如下配置。
这里会用到vite-plugin-style-import插件，自己下载即可。
import {
createStyleImportPlugin,
ElementPlusResolve,
} from "vite-plugin-style-import";
// 解决message和notification引入不生效问题
createStyleImportPlugin({
resolves: [ElementPlusResolve()],
}),想要动态改变浏览器中title，可以使用vite-plugin-html，可以进行title的动态配置, 然后可以在index.html根目录下进行渲染了
如下：
createHtmlPlugin({
inject: {
data: {
title: "vite+vue3+ts",
description: "系统",
version: "1.0.1",
},
},
}),<title><%-title%></title>
配置全局的css、less、scss，可以如下配置：我在项目main.ts引入了样式所以这里注释了
css: {
preprocessorOptions: {
// less: {
// 全局添加less
// additionalData: `@import '@/assets/styles/common/var.less';`,
// javascriptEnabled: true,
// },
},
},然后就是打包时代码的一些配置了。
配置去除console.log、debugger以及注释等。
/** Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效 */
minify: "terser",
/** 在打包代码时移除 console.log、debugger 和 注释 */
terserOptions: {
//打包后移除console和注释
compress: {
drop_console: false,
drop_debugger: true,
pure_funcs: ["console.log"],
},
format: {
/** 删除注释 */
comments: false,
},
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。