vite.config.ts 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import legacy from '@vitejs/plugin-legacy'
  4. import { resolve } from 'path'
  5. import postcsspxtoviewport from 'postcss-px-to-viewport-8-plugin'
  6. import autoprefixer from 'autoprefixer'
  7. import Components from 'unplugin-vue-components/vite'
  8. import { VantResolver } from 'unplugin-vue-components/resolvers'
  9. function pathResolve(dir) {
  10. // eslint-disable-next-line no-undef
  11. return resolve(__dirname, '.', dir)
  12. }
  13. // https://vitejs.dev/config/
  14. export default defineConfig({
  15. plugins: [
  16. vue(),
  17. Components({
  18. resolvers: [VantResolver()]
  19. }),
  20. legacy({
  21. targets: ['defaults', 'not IE 11', 'chrome >= 50', 'UCAndroid >= 12'],
  22. additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
  23. renderLegacyChunks: true,
  24. polyfills: [
  25. 'es.symbol',
  26. 'es.array.filter',
  27. 'es.promise',
  28. 'es.promise.finally',
  29. 'es/map',
  30. 'es/set',
  31. 'es.array.for-each',
  32. 'es.object.define-properties',
  33. 'es.object.define-property',
  34. 'es.object.get-own-property-descriptor',
  35. 'es.object.get-own-property-descriptors',
  36. 'es.object.keys',
  37. 'es.object.to-string',
  38. 'web.dom-collections.for-each',
  39. 'esnext.global-this',
  40. 'esnext.string.match-all'
  41. ]
  42. })
  43. ],
  44. server: {
  45. host: '0.0.0.0',
  46. cors: true,
  47. open: true,
  48. port: 5066,
  49. proxy: {
  50. // 跨域前缀写法
  51. '/api': {
  52. target: 'http://192.168.99.223:3000',
  53. changeOrigin: true,
  54. rewrite: (path) => path.replace(/^\/api/, '')
  55. }
  56. }
  57. },
  58. resolve: {
  59. alias: {
  60. '@': pathResolve('src') // 路径别名
  61. },
  62. extensions: ['.js', '.json', '.ts', '.mjs'] // 使用路径别名时想要省略的后缀名,可以自己 增减
  63. },
  64. css: {
  65. postcss: {
  66. plugins: [
  67. autoprefixer({
  68. overrideBrowserslist: [
  69. 'Android 4.1',
  70. 'iOS 7.1',
  71. 'Chrome > 31',
  72. 'ff > 31',
  73. 'ie >= 8'
  74. // 'last 2 versions', // 所有主流浏览器最近2个版本
  75. ],
  76. grid: true
  77. }),
  78. postcsspxtoviewport({
  79. unitToConvert: 'px', // 需要转换的单位,默认为"px"
  80. viewportWidth: 375, // 设计稿的视口宽度
  81. exclude: [/node_modules/], // 解决vant375,设计稿750问题。忽略某些文件夹下的文件或特定文件
  82. unitPrecision: 5, // 单位转换后保留的精度
  83. propList: ['*'], // 能转化为vw的属性列表
  84. viewportUnit: 'vw', // 希望使用的视口单位
  85. fontViewportUnit: 'vw', // 字体使用的视口单位
  86. selectorBlackList: [], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
  87. minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
  88. mediaQuery: false, // 媒体查询里的单位是否需要转换单位
  89. replace: true, // 是否直接更换属性值,而不添加备用属性
  90. landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
  91. landscapeUnit: 'vw', // 横屏时使用的单位
  92. landscapeWidth: 1125 // 横屏时使用的视口宽度
  93. })
  94. ]
  95. }
  96. }
  97. })