vite.config.ts 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import styleImport, { VantResolve } from 'vite-plugin-style-import'
  4. import postCssPxToRem from 'postcss-pxtorem'
  5. import WindiCSS from 'vite-plugin-windicss'
  6. import * as path from 'path'
  7. // https://vitejs.dev/config/
  8. export default defineConfig({
  9. server: {
  10. port: 4500, // 设置服务启动端口号
  11. open: true, // 设置服务启动时是否自动打开浏览器
  12. cors: true // 允许跨域
  13. // 设置代理,根据我们项目实际情况配置
  14. // proxy: {
  15. // '/api': {
  16. // target: 'http://xxx.xxx.xxx.xxx:x000',
  17. // changeOrigin: true,
  18. // secure: false,
  19. // rewrite: (path) => path.replace('/api/', '/')
  20. // }
  21. // },
  22. },
  23. base: './', // 设置打包路径
  24. plugins: [
  25. vue(),
  26. WindiCSS(),
  27. styleImport({
  28. // resolves: [VantResolve()],
  29. libs: [
  30. {
  31. libraryName: 'vant',
  32. esModule: true,
  33. resolveStyle: component => `vant/es/${component}/style/index`
  34. }
  35. ]
  36. })
  37. ],
  38. resolve: {
  39. alias: {
  40. '@': path.resolve(__dirname, 'src'), //使用@来代表src目录
  41. components: path.resolve(__dirname, 'src/components'),
  42. styles: path.resolve(__dirname, 'src/styles'),
  43. plugins: path.resolve(__dirname, 'src/plugins'),
  44. views: path.resolve(__dirname, 'src/views'),
  45. layouts: path.resolve(__dirname, 'src/layouts'),
  46. utils: path.resolve(__dirname, 'src/utils'),
  47. apis: path.resolve(__dirname, 'src/apis'),
  48. dirs: path.resolve(__dirname, 'src/directives')
  49. }
  50. },
  51. css: {
  52. postcss: {
  53. plugins: [
  54. postCssPxToRem({
  55. rootValue: 37.5, // Vant 官方根字体大小是 37.5
  56. propList: ['*'],
  57. selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class,不进行rem转换
  58. })
  59. ]
  60. }
  61. }
  62. })