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;
import { lazyImport, VxeResolver } from 'vite-plugin-lazy-import'
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)
export default defineConfig(() => {
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'
})
]
}),
createSvgIconsPlugin({
iconDirs: [resolve(__dirname, './src/assets/icons/svg')],
symbolId: 'icon-[name]'
}),
monacoEditorPlugin({
languages: [
'javascript',
'typescript',
'html',
'css',
'json',
'java',
'sql',
'groovy',
'shell',
'python'
],
customDistPath: (root) => join(root, 'dist/assets/monaco-editor'),
publicPath: 'assets/monaco-editor',
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,
changeOrigin: true,
secure: false,
logLevel: 'debug'
}
}
}
}
return {
...config,
build: {
chunkSizeWarningLimit: 2000,
rollupOptions: {
output: {
format: 'esm'
}
},
sourcemap: false,
cssCodeSplit: true,
},
server: {
...config.server,
middlewares: [
(req, res, next) => {
if (req.url.endsWith('.js')) {
res.setHeader('Content-Type', 'application/javascript')
}
next()
}
]
}
}
})