vite.config.ts 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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. base:'/',
  14. // 在生产环境中,将文件名中的 .js 替换为 .mjs
  15. css:{
  16. preprocessorOptions:{
  17. scss:{
  18. additionalData:'@import "./src/styles/variable.scss";' //引入scss文件
  19. }
  20. }
  21. },
  22. devServer:{
  23. proxy:{
  24. '/api':{
  25. target:'http://127.0.0.1:8081/',
  26. changeOrigin:true,
  27. secure:false,
  28. rewrite:(path)=>path.replace(/^\/api/,'')
  29. }
  30. }
  31. },
  32. plugins: [
  33. viteMockServe({
  34. // 保证开发阶段可以使用mock,生产环境禁止开启
  35. localEnabled: command === 'serve',
  36. mockPath: './mock' // mock数据所在的目录 ./mock 代表和vite.config.js同级目录即根目录
  37. }),
  38. AutoImport({
  39. resolvers: [ElementPlusResolver()],
  40. }),
  41. Components({
  42. resolvers: [ElementPlusResolver()],
  43. }),
  44. createSvgIconsPlugin({
  45. // 指定需要缓存的图标文件夹
  46. iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
  47. // 指定symbolId格式
  48. symbolId: 'icon-[dir]-[name]'
  49. }),
  50. vue(),
  51. ],
  52. resolve: {
  53. alias: {
  54. '@': fileURLToPath(new URL('./src', import.meta.url))
  55. }
  56. }
  57. }
  58. })