代码拉取完成,页面将自动刷新
import { URL, fileURLToPath } from 'node:url'
import path from 'node:path'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd()) as ImportMetaEnv
return {
// 开发或生产环境服务的公共基础路径
base: env.VITE_BASE,
// 路径别名
resolve: {
alias: {
'~': fileURLToPath(new URL('./', import.meta.url)),
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 引入sass全局样式变量
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/var.scss";`
}
}
},
server: {
// 服务启动时是否自动打开浏览器
open: false,
// 本地跨域代理 -> 代理到服务器的接口地址
proxy: {
'/api': {
target: env.VITE_API_BASE_URL, // 后台服务器地址
changeOrigin: true, // 是否允许不同源
secure: false, // 支持https
rewrite: (path) => path.replace(/^\/api/, '/api')
}
}
},
plugins: [
vue(),
vueJsx(),
AutoImport({
// 自动导入vue相关函数,如: ref、reactive、toRef等
imports: ['vue', 'vue-router', {
// vue 3.5.x
vue: ['useTemplateRef', 'onWatcherCleanup', 'useId']
}],
dts: 'src/auto-import.d.ts'
}),
Components({
// 指定组件位置,默认是 src/components 自动导入自定义组件
dirs: ['src/components'],
extensions: ['vue', 'tsx'],
// 配置文件生成位置
dts: 'src/components.d.ts'
}),
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]'
}),
viteMockServe({
mockPath: 'mock', // 目录位置
logger: true, // 是否在控制台显示请求日志
supportTs: true, // 是否读取ts文件模块
localEnabled: true, // 设置是否启用本地mock文件
prodEnabled: true, // 设置打包是否启用mock功能
// 这样可以控制关闭mock的时候不让mock打包到最终代码内
injectCode: `
import { setupProdMockServer } from '../mock/index';
setupProdMockServer();
`
})
],
// 构建
build: {
chunkSizeWarningLimit: 2000, // 消除打包大小超过500kb警告
outDir: 'dist', // 指定打包路径,默认为项目根目录下的dist目录
minify: 'terser', // Vite 2.6.x 以上需要配置 minify:"terser",terserOptions才能生效
terserOptions: {
compress: {
keep_infinity: true, // 防止 Infinity 被压缩成 1/0,这可能会导致 Chrome 上的性能问题
drop_console: true, // 生产环境去除 console
drop_debugger: true // 生产环境去除 debugger
},
format: {
comments: false // 删除注释
}
},
// 静态资源打包到dist下的不同目录
rollupOptions: {
output: {
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
}
}
}
}
})
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。