vite.config.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. import legacyPlugin from '@vitejs/plugin-legacy'
  2. import AutoImport from 'unplugin-auto-import/vite'
  3. import Components from 'unplugin-vue-components/vite'
  4. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  5. import { viteLogo } from './src/core/config'
  6. import Banner from 'vite-plugin-banner'
  7. import * as path from 'path'
  8. import * as dotenv from 'dotenv'
  9. import * as fs from 'fs'
  10. import vuePlugin from '@vitejs/plugin-vue'
  11. import GvaPosition from './vitePlugin/gvaPosition'
  12. import GvaPositionServer from './vitePlugin/codeServer'
  13. import fullImportPlugin from './vitePlugin/fullImport/fullImport.js'
  14. import { svgBuilder } from './vitePlugin/svgIcon/svgIcon.js'
  15. // @see https://cn.vitejs.dev/config/
  16. export default ({
  17. command,
  18. mode,
  19. }) => {
  20. const NODE_ENV = mode || 'development'
  21. const envFiles = [
  22. `.env.${NODE_ENV}`
  23. ]
  24. for (const file of envFiles) {
  25. const envConfig = dotenv.parse(fs.readFileSync(file))
  26. for (const k in envConfig) {
  27. process.env[k] = envConfig[k]
  28. }
  29. }
  30. viteLogo(process.env)
  31. const timestamp = Date.parse(new Date())
  32. const optimizeDeps = {}
  33. const alias = {
  34. '@': path.resolve(__dirname, './src'),
  35. 'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
  36. }
  37. const esbuild = {}
  38. const rollupOptions = {
  39. output: {
  40. entryFileNames: 'assets/087AC4D233B64EB0[name].[hash].js',
  41. chunkFileNames: 'assets/087AC4D233B64EB0[name].[hash].js',
  42. assetFileNames: 'assets/087AC4D233B64EB0[name].[hash].[ext]',
  43. },
  44. }
  45. const config = {
  46. base: './', // index.html文件所在位置
  47. root: './', // js导入的资源路径,src
  48. resolve: {
  49. alias,
  50. },
  51. define: {
  52. 'process.env': {},
  53. __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
  54. },
  55. server: {
  56. // 如果使用docker-compose开发模式,设置为false
  57. open: true,
  58. port: process.env.VITE_CLI_PORT,
  59. proxy: {
  60. // 把key的路径代理到target位置
  61. // detail: https://cli.vuejs.org/config/#devserver-proxy
  62. [process.env.VITE_BASE_API]: { // 需要代理的路径 例如 '/api'
  63. target: `${process.env.VITE_BASE_PATH}:${process.env.VITE_SERVER_PORT}/`, // 代理到 目标路径
  64. changeOrigin: false,
  65. rewrite: path => path.replace(new RegExp('^' + process.env.VITE_BASE_API), ''),
  66. }
  67. },
  68. },
  69. build: {
  70. minify: 'terser', // 是否进行压缩,boolean | 'terser' | 'esbuild',默认使用terser
  71. manifest: false, // 是否产出manifest.json
  72. sourcemap: false, // 是否产出sourcemap.json
  73. outDir: 'dist', // 产出目录
  74. rollupOptions,
  75. },
  76. esbuild,
  77. optimizeDeps,
  78. plugins: [
  79. process.env.VITE_POSITION === 'open' && GvaPositionServer(),
  80. process.env.VITE_POSITION === 'open' && GvaPosition(),
  81. legacyPlugin({
  82. targets: ['Android > 39', 'Chrome >= 60', 'Safari >= 10.1', 'iOS >= 10.3', 'Firefox >= 54', 'Edge >= 15'],
  83. }),
  84. vuePlugin(),
  85. svgBuilder('./src/assets/icons/'),
  86. [Banner(`\n Build based on gin-vue-admin \n Time : ${timestamp}`)]
  87. ],
  88. css: {
  89. preprocessorOptions: {
  90. scss: {
  91. additionalData: `@use "@/style/element/index.scss" as *;`,
  92. }
  93. }
  94. },
  95. }
  96. if (NODE_ENV === 'development') {
  97. config.plugins.push(
  98. fullImportPlugin()
  99. )
  100. } else {
  101. config.plugins.push(AutoImport({
  102. resolvers: [ElementPlusResolver()]
  103. }),
  104. Components({
  105. resolvers: [ElementPlusResolver({
  106. importStyle: 'sass'
  107. })]
  108. }))
  109. }
  110. return config
  111. }