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 { ElementPlusResolver } from 'unplugin-vue-components/resolvers' //引入element ui插件
import { resolve } from 'path';
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import IconsResolver from 'unplugin-icons/resolver'
// https://vitejs.dev/config/
export default defineConfig({
base: './', //打包后的文件目录
plugins: [
vue(),
AutoImport({
// 自动导入 Vue 相关函数,如:ref, reactive, toRef 等
imports: ['vue'],
resolvers: [
ElementPlusResolver(),
IconsResolver({
prefix: 'Icon',
}),
],
}),
Components({
resolvers: [
// 自动注册图标组件
IconsResolver({
enabledCollections: ['ep'],
}),
ElementPlusResolver()],
}),
VueSetupExtend()
],
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
'*': resolve(''),
'ass':resolve('assets')
},
},
css:{
preprocessorOptions:{
scss:{
additionalData:'@import"./src/assets/style/main.scss";'
}
}
},
server: {
// 服务器主机名
host: 'localhost',
// 端口号
port: 9537,
// 设为 true 时若端口已被占用则会直接退出,而不是尝试下一个可用端口
strictPort: false,
// 服务器启动时自动在浏览器中打开应用程序,当此值为字符串时,会被用作 URL 的路径名
open: false,
// 自定义代理规则
proxy: {
// 选项写法
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
})
需要下载的依赖
npm install unplugin-icons --save
npm install 'unplugin-auto-import --save
npm install unplugin-vue-components --save
npm install vite-plugin-vue-setup-extend --save