vue.config

251 阅读1分钟
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { fileURLToPath, URL } from 'node:url'
import { dirname, resolve, join } from 'path'
import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import vueDevTools from 'vite-plugin-vue-devtools'
import monacoEditorNS from 'vite-plugin-monaco-editor';
const monacoEditorPlugin = monacoEditorNS.default;
// 按需自动导入vxe新版插件
import { lazyImport, VxeResolver } from 'vite-plugin-lazy-import'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

// https://vitejs.dev/config/
export default defineConfig(() => {
  // const isDev = mode === "development";
  const config = {
    optimizeDeps: {
      include: ['@monaco-editor/loader', 'vue-router', 'vue', '@vueuse/core',  'monaco-editor',],
      exclude: [],
      entries: ['src/**/*.vue'],
      esbuildOptions: {
        target: 'esnext'
  }
},
base: '/codeWeb',
plugins: [
  vue(),
  vueJsx(),
  vueDevTools(),
  
  lazyImport({
    resolvers: [
      VxeResolver({
        libraryName: 'vxe-table'
      }),
      VxeResolver({
        libraryName: 'vxe-pc-ui'
      })
    ]
  }),
  /** SVG */
  createSvgIconsPlugin({
    iconDirs: [resolve(__dirname, './src/assets/icons/svg')],
    symbolId: 'icon-[name]'
  }),
  monacoEditorPlugin({
    languages: [
      'javascript',
      'typescript',
      'html',
      'css',
      'json',
      'java',
      'sql',
      'groovy',
      'shell',
      'python'
    ],
    // 禁用monaco-editor的sourcemap
    customDistPath: (root) => join(root, 'dist/assets/monaco-editor'),
    publicPath: 'assets/monaco-editor',
    // 强制禁用sourcemap
    sourcemap: false
  })
],
resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url))
  }
},
css: {
  preprocessorOptions: {
    scss: {
      additionalData: `
        @use "@/styles/variables.scss" as *;
      `
    }
  }
},
server: {
  port: 5000,
  proxy: {
    '/plugin': {
      target: '',
      ws: false, // 如果你不需要代理 WebSocket 连接,可以设置为 false
      changeOrigin: true,
      secure: false,
      logLevel: 'debug'
    }
  }
}
  }

  return {
    ...config,
    build: {
      chunkSizeWarningLimit: 2000,
      rollupOptions: {
        output: {
          format: 'esm'
        }
      },
      // 禁用源码映射,避免文件锁定问题
      sourcemap: false,
      // CSS代码分割
      cssCodeSplit: true,
 
},
// 确保正确的MIME类型
server: {
  ...config.server,
  middlewares: [
    (req, res, next) => {
      // 为所有JavaScript文件设置正确的MIME类型
      if (req.url.endsWith('.js')) {
        res.setHeader('Content-Type', 'application/javascript')
      }
      next()
    }
  ]
    }
  }
})