import Vue from ‘@vitejs/plugin-vue’
import path from ‘path’
import { defineConfig, loadEnv } from ‘vite’
// import VueDevTools from ‘vite-plugin-vue-devtools’
import AutoImport from ‘unplugin-auto-import/vite’
import { AntDesignVueResolver } from ‘unplugin-vue-components/resolvers’
import Components from ‘unplugin-vue-components/vite’
import eslintPlugin from ‘vite-plugin-eslint’ // 导入包
import removeNoMatch from ‘vite-plugin-router-warn’
import simpleHtmlPlugin from ‘vite-plugin-simple-html’
import ViteSvgLoader from ‘vite-svg-loader’ // 引入SVG loader。
// import { createSvgIconsPlugin } from ‘vite-plugin-svg-icons’
import vueJsx from ‘@vitejs/plugin-vue-jsx’
import Unocss from ‘unocss/vite’

import pxtorem from ‘postcss-pxtorem’
import config from ‘./src/config’
export default defineConfig(({ command, mode }) => {
const isBuild = command === ‘build’
const viteEnv = loadEnv(mode, process.cwd())
const { VITE_DIST_TITLE } = viteEnv
return {
base: config.publicPath,
plugins: [
Vue(),
vueJsx(),
// 配置svg
// createSvgIconsPlugin({
// // 指定需要缓存的图标文件夹
// iconDirs: [path.resolve(process.cwd(), ‘src/assets/icons’)],
// // 指定symbolId格式
// symbolId: ‘icon-[dir]-[name]’
// }),
Unocss(),
eslintPlugin({
include: [‘src//*.ts’, 'src//.vue’, 'src/.ts’, ‘src/.vue’]
}),
// VueDevTools(),
AutoImport({
imports: [‘vue’, ‘pinia’, ‘vue-router’],
eslintrc: {
enabled: true, // 1、改为true用于生成eslint配置。2、生成后改回false,避免重复生成消耗
globalsPropValue: true,
filepath: ‘scaffold-config/.eslint-global-variables.json’
},
dirs: [‘src/store/modules/', 'src/utils/auto-import/’],
dts: ‘scaffold-config/auto-imports.d.ts’
}),
Components({
resolvers: [
AntDesignVueResolver({
importStyle: false // css in js
}),
‘.ts’,
‘.tsx’
],
extensions: [‘vue’],
dirs: [‘src/components/base-components’],
deep: true,
dts: ‘scaffold-config/components.d.ts’
}),
simpleHtmlPlugin({
minify: isBuild,
inject: {
data: {
title: VITE_DIST_TITLE,
versions: new Date().getTime(),
VITE_MODE: viteEnv.VITE_MODE
}
}
}),
// 自定义插件,用于生成页面文件的path,并添加到虚拟模块
// pluginPagePathes(),
// 自定义插件,用于生成自定义icon,并添加到虚拟模块
// pluginIcons(),
// 移除非必要的vue-router动态路由警告: No match found for location with path
removeNoMatch(),
// icon地址配置
ViteSvgLoader()
],
css: {
postcss: {
plugins: [
pxtorem({
rootValue: config.pxtorem.baseSize, // 结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
propList: config.pxtorem.open ? ['
’] : [], // 是一个存储哪些将被转换的属性列表,这里设置为[‘‘]全部,假设需要仅对边框进行设置,可以写[’’, ‘!border*’]
unitPrecision: 5, // 保留rem小数点多少位
minPixelValue: 5, // 设置要替换的最小像素值 px小于x的不会被转换
selectorBlackList: [‘.norem’, ‘.root-container’], // 过滤掉.norem开头的class,不进行rem转换
exclude: /node_modules/i, // 这里表示不处理node_modules文件下的css
mediaQuery: false // 是否在媒体查询的css代码中也进行转换
})
]
},
preprocessorOptions: {
less: {
additionalData: @import "@/assets/styles/variables.less";,
javascriptEnabled: true,
math: ‘strict’
}
}
},
resolve: {
alias: {
‘@’: path.resolve(process.cwd(), ‘src’),
‘~’: path.resolve(process.cwd())
}
},
server: {
host: ‘0.0.0.0’,
port: config.devPort,
open: false,
proxy: {
[‘/api’]: {
// target: ‘https://zhdd.hnjt.com.cn/gateway/api/mvom-hngs’,
target: ‘http://10.0.4.8/gateway/api/mvom-hngs/’,
changeOrigin: true,
rewrite: (path) => path.replace(new RegExp(^/api), ‘’),
secure: false,
configure: (proxy, options) => {
// 配置此项可在响应头中看到请求的真实地址
proxy.on(‘proxyRes’, (proxyRes, req) => {
proxyRes.headers[‘x-real-url’] = new URL(req.url || ‘’, options.target)?.href || ‘’
})
}
},
[‘/jiaojing’]: {
target: ‘http://88.1.203.180:8077’,
changeOrigin: true,
rewrite: (path) => path.replace(new RegExp(^/jiaojing), ‘’),
secure: false,
configure: (proxy, options) => {
// 配置此项可在响应头中看到请求的真实地址
proxy.on(‘proxyRes’, (proxyRes, req) => {
proxyRes.headers[‘x-real-url’] = new URL(req.url || ‘’, options.target)?.href || ‘’
})
}
},
[‘/jc’]: {
target: ‘http://88.1.203.180:9081’,
changeOrigin: true,
rewrite: (path) => path.replace(new RegExp(^/jc), ‘’),
secure: false,
configure: (proxy, options) => {
// 配置此项可在响应头中看到请求的真实地址
proxy.on(‘proxyRes’, (proxyRes, req) => {
proxyRes.headers[‘x-real-url’] = new URL(req.url || ‘’, options.target)?.href || ‘’
})
}
},

    ['/websocket']: {
      // target: 'https://zhdd.hnjt.com.cn/websocket-server/websocket',
      target: 'http://10.0.4.8/websocket-server/websocket',
      changeOrigin: true,
      rewrite: (path) => path.replace(new RegExp(`^/websocket`), ''),
      secure: false,
      configure: (proxy, options) => {
        // 配置此项可在响应头中看到请求的真实地址
        proxy.on('proxyRes', (proxyRes, req) => {
          proxyRes.headers['x-real-url'] = new URL(req.url || '', options.target)?.href || ''
        })
      }
    },
    ['/wrj']: {
      target: 'http://10.0.4.9:8078',
      changeOrigin: true,
      rewrite: (path) => path.replace(new RegExp(`^/wrj`), ''),
      secure: false,
      configure: (proxy, options) => {
        // 配置此项可在响应头中看到请求的真实地址
        proxy.on('proxyRes', (proxyRes, req) => {
          proxyRes.headers['x-real-url'] = new URL(req.url || '', options.target)?.href || ''
        })
      }
    }
  }
},
build: {
  // 生产环境构建文件的目录名
  assetsDir: config.assetsDir,
  // 打包生成文件名
  outDir: 'mvom',
  terserOptions: {
    compress: {
      drop_console: true // 移除console
    }
  },
  rollupOptions: {
    output: {
      manualChunks: {
        // 将第三方库分块打包
        vendor: ['vue', 'vue-router', 'pinia'],
        'ant-design': ['ant-design-vue']
        // 其他大型依赖也可以单独拆分
      },
      chunkFileNames: 'static/js/[name]-[hash].js',
      assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      entryFileNames: 'static/js/[name]-[hash].js'
    }
  },
  // 资源文件不放入js文件中
  assetsInlineLimit: 0,
  chunkSizeWarningLimit: 1024 // chunk 大小警告的限制(单位kb)
}

}
})

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐