vue3学习之路vite.config.js文件配置
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// 导入自动导入图片路径转换的插件
import autoImport from 'unplugin-auto-import/vite';
// 导入组件自动导出的插件
import components from 'unplugin-vue-components/vite';
// 导入图标库自动导入的插件
import Icons from 'unplugin-icons/vite';
// 导入图标库的 heroicons 库
import IconsResolver from 'unplugin-icons/resolver';
// 导入路径别名
import { resolve } from 'path';
export default defineConfig({
plugins: [
vue(),
autoImport({
imports: ['vue'],
}),
components({
resolvers: [IconsResolver({
prefix: 'Icon',
})],
}),
Icons({
scale: 1.2,
}),
],
resolve: {
alias: {
'@': resolve(__dirname, './src'),
},
},
server: {
port: 4000,
open: true,
},
});
这个配置文件使用了Vite的defineConfig
方法来确保配置对象是可选的,同时也导入了Vue插件、自动导入插件、组件自动导出插件和图标库自动导入插件。路径别名也被配置,服务器端口设置为4000,并且在开发服务器运行时自动打开浏览器。
评论已关闭