vite.config.js 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import vue from '@vitejs/plugin-vue'; //提供 Vue 3 单文件组件支持
  2. import OptimizationPersist from "vite-plugin-optimize-persist";
  3. import PkgConfig from "vite-plugin-package-config";
  4. import path from 'path';
  5. import {
  6. defineConfig
  7. } from 'vite';
  8. // import postCssPxToRem from "postcss-pxtorem";
  9. // https://vitejs.dev/config/
  10. export default defineConfig({
  11. plugins: [vue()],
  12. plugins: [
  13. vue(),
  14. PkgConfig(),
  15. OptimizationPersist()
  16. ],
  17. // 部署生产环境和开发环境下的URL。
  18. // 默认情况下,vite 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.ruoyi.vip/。
  19. // 如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
  20. // base: './',
  21. base: process.env.NODE_ENV === 'production' ? './' : '/sdjt/',
  22. resolve: {
  23. alias: {
  24. // 设置别名
  25. '@': path.resolve(__dirname, './src')
  26. },
  27. //导入时想要省略的扩展名列表
  28. extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
  29. },
  30. /* 全局变量 */
  31. css: {
  32. // 指定传递给 CSS 预处理器的选项
  33. preprocessorOptions: {
  34. scss: {
  35. additionalData: '@use "@/assets/styles/variables.scss" as *;'
  36. },
  37. },
  38. // postcss: {
  39. // plugins: [
  40. // postCssPxToRem({
  41. // rootValue: 192, // (设计稿/10)1rem的大小
  42. // propList: ['*'], // 需要转换的属性,这里选择全部都进行转换
  43. // })
  44. // ]
  45. // }
  46. },
  47. /* 服务器配置 */
  48. server: {
  49. /* 端口 */
  50. port: 3000,
  51. /* 地址 */
  52. host: "0.0.0.0",
  53. /* 编译后是否打开浏览器 */
  54. open: true,
  55. /* 是否开启https */
  56. https: false,
  57. },
  58. /* 打包配置 */
  59. build: {
  60. /**
  61. * 设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值——'modules',这是指 支持原生 ES 模块的浏览器。
  62. */
  63. target: 'modules',
  64. /**
  65. * 指定输出路径(相对于 项目根目录).
  66. * @default 'dist'
  67. */
  68. outDir: "dist",
  69. /**
  70. * 启用/禁用 CSS 代码拆分
  71. */
  72. cssCodeSplit: true,
  73. /**
  74. * 混淆器,terser构建后文件体积更小
  75. */
  76. minify: 'terser', // 混淆器,terser构建后文件体积更小
  77. chunkSizeWarningLimit: 4500,
  78. rollupOptions: {
  79. output: {
  80. manualChunks(id) {
  81. if (id.includes('node_modules')) {
  82. return id.toString().split('node_modules/')[1].split('/')[0].toString();
  83. }
  84. }
  85. }
  86. }
  87. },
  88. })