vite.config.ts 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. import { fileURLToPath, URL } from 'node:url'
  2. import { viteMockServe } from 'vite-plugin-mock'
  3. import path from 'path'
  4. import { defineConfig } from 'vite'
  5. import vue from '@vitejs/plugin-vue'
  6. import AutoImport from 'unplugin-auto-import/vite'
  7. import Components from 'unplugin-vue-components/vite'
  8. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  9. import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
  10. // https://vitejs.dev/config/
  11. export default defineConfig(({command})=>{
  12. return {
  13. css:{
  14. preprocessorOptions:{
  15. scss:{
  16. additionalData:'@import "./src/styles/variable.scss";' //引入scss文件
  17. }
  18. }
  19. },
  20. plugins: [
  21. viteMockServe({
  22. // 保证开发阶段可以使用mock,生产环境禁止开启
  23. localEnabled: command === 'serve',
  24. mockPath: './mock' // mock数据所在的目录 ./mock 代表和vite.config.js同级目录即根目录
  25. }),
  26. AutoImport({
  27. resolvers: [ElementPlusResolver()],
  28. }),
  29. Components({
  30. resolvers: [ElementPlusResolver()],
  31. }),
  32. createSvgIconsPlugin({
  33. // 指定需要缓存的图标文件夹
  34. iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
  35. // 指定symbolId格式
  36. symbolId: 'icon-[dir]-[name]'
  37. }),
  38. vue(),
  39. ],
  40. resolve: {
  41. alias: {
  42. '@': fileURLToPath(new URL('./src', import.meta.url))
  43. }
  44. }
  45. }
  46. })