vite.config.js
selectorBlackList: [‘.norem’, ‘.root-container’], // 过滤掉.norem开头的class,不进行rem转换。exclude: /node_modules/i, // 这里表示不处理node_modules文件下的css。’] : [], // 是一个存储哪些将被转换的属性列表,这里设置为[‘// 自定义插件,用于生成页面文件的path,并添加到虚
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)
}
}
})
更多推荐
所有评论(0)