vite.config.js 2.4 KB

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