开启 CSS 路径追踪
devSourcemap: true,
import { defineConfig } from "vite";
export default defineConfig({
optimizeDeps: {
exclude: [] // 将指定数组中的依赖不进行依赖预构建
},
envPrefix: "VITE_", // 配置环境变量前缀
css: {
devSourcemap: true, // 开启 CSS source map 追踪 就是在页面上的
}
});
vite.Base.config.ts 配置
import { defineConfig } from "vite";
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
optimizeDeps: {
exclude: [] // 将指定数组中的依赖不进行依赖预构建
},
envPrefix: "VITE_", // 配置环境变量前缀
resolve: {
alias: {
"@": "/src",
"@assets": "/src/assets",
}
},
plugins: [
vue(),
viteCompression() // 压缩插件
],
build: { // 配置打包配置
rollupOptions: { // rollup 配置
output: {
assetFileNames: "[name].[ext].[hash]", // 输出的文件名 名称.扩展名.hash值
// 分包策略 会再打包时 将node_modules 打包为 vendor 文件
manualChunks: (id) => {
console.log('id ===>', id);
if (id.includes('node_modules')) {
return 'vendor';
}
}
}
},
assetsInlineLimit: 4096000, // 4000kb
outDir: 'dist', // 输出目录
assetsDir: 'static',
minify: false, // 打包后不乱码
}
});
vite.config.ts 配置
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import viteBaseConfig from './vite.base.config.ts'
import viteDevConfig from './vite.dev.config.ts'
import viteTestConfig from './vite.dev.config.ts'
import viteProdConfig from './vite.prod.config.ts'
const envResolver: any = {
"serve": () => {
console.log("本地环境");
return { ...viteBaseConfig, ...viteDevConfig }
},
"test": () => {
console.log("测试环境");
return { ...viteBaseConfig, ...viteTestConfig }
},
"build": () => {
console.log("生产环境");
return { ...viteBaseConfig, ...viteProdConfig }
},
}
export default defineConfig(({ command, mode }) => {
console.log('command,mode ===>', command, mode);
// 加载环境变量,确保环境变量文件路径正确
const env = loadEnv(mode, `${process.cwd()}/config/env`, 'VITE_'); // 这个地方控制的是 env 中的变量
console.log('env.VITE_APP_KEY ===>', env.VITE_APP_KEY);
// 指定新的 env 目录路径
const envDir = './config/env';
return {
envDir, // 指定新的 env 目录路径 这个地方控制的是 import.meta.env 中的变量
plugins: [vue()],
...envResolver[command]()
};
});
编写插件已学配置
vite 打包 [gzip压缩] vite-plugin-compression
import viteCompression from 'vite-plugin-compression'
plugins: [
viteCompression()
],