vite.base.config.js
// path 本质上就是一个路径字符串处理模块，它里面有非常多的路径字符串处理方法
import path from "path";
import { defineConfig } from "vite";
import postcssPresetEnv from 'postcss-preset-env'
import myViteAliases from './plugins/ViteAliases.js'
// import { createHtmlPlugin } from 'vite-plugin-html'
import CreateHtmlPlugin from "./plugins/CreateHtmlPlugin.js";
// import { viteMockServe } from 'vite-plugin-mock'
import VitePluginMock from "./plugins/VitePluginMock.js";
import checker from "vite-plugin-checker";
import viteCompression from 'vite-plugin-compression'
import viteCDNPlugin from 'vite-plugin-cdn-import'
export default defineConfig({
resolve: {
// 路径别名
// alias: {
// "@": path.resolve(__dirname, "./src"),
// "@assets": path.resolve(__dirname, "./src/assets")
// },
extensions: ['.js', '.mjs', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
optimizeDeps: {
exclude: []
},
envPrefix: 'ENV_', //可识别的环境变量前缀
css: { //对css的行为进行配置
modules: { //对css模块化默认行为进行覆盖, module 配置最终是会传给 postcss modules
// 修改生成的配置对象的key的展示形式（驼峰还是中划线的形式）
localsConvention: 'camelCaseOnly',
// 配置当前的模块化行为是模块化还是全局化(有 hash 就是开启了模块化的标志，因为他可以保证产生不同的 hash 值来控制我们的样式不被覆盖)
scopeBehaviour: 'local',
// 生产类名的规则(可以配置成函数也可以配置成字符串)：https://github.com/webpack/loader-utils#interpolatename
generateScopedName: '[name]_[local]_[hash:5]',
// generateScopedName: (name, filename, css) => {
// // name ---> 代表当前css文件的类名
// // filename ---> 当前css文件的绝对路径
// // css ---> 当前的样式
// return `${name}_${Math.random().toString(36).substring(5, 12)}`
// } //配置成函数时，返回值决定了他最终的显示类型
// 生产 hash 的时候会根据给的类名以及其他字符串生产，如果想要生产的 hash 更加的独特一点，可以配置 hashPrefix， 该前缀可以参与 hash 生产
hashPrefix: 'lijian',
// 代表不想参与到css模块化的路径，
globalModulePaths: []
},
// 用来配置 css预处理器 的全局参数
preprocessorOptions: {
// 整个配置对象最后都会给到less的执行（全局）参数中去
less: {
math: 'always',
// 全局变量，可以在全局使用，不需要再额外多文件中导入以下变量
globalVars: {
mainColor: 'red'
}
},
sass: {}
},
// 文件间的索引（当没有索引时，当程序报错的时候只会指出压缩后的代码文件的错误位置，而无法定位到源代码的错误位置）
devSourcemap: true, //开启css的文件索引（sourceMap）
// 直接配置的就是 postcss 的配置
postcss: {
plugins: [
postcssPresetEnv({
importFrom: [path.resolve(__dirname, './variable.css')]
})
]
}
},
// 构建生产包时的一些策略
build: {
// 配置 rollup 的一些构建策略
rollupOptions: {
// 控制输出
output: {
// 在 rollup 中 hash 是将文件名和文件内容组合计算得出来的结果
assetFileNames: "[hash].[name].[ext]",
// 分包策略
manualChunks: (id) => {
// id 是每个文件模块的绝对路径
// node_modules 中的文件包，例如 lodash
if (id.includes('node_modules')) {
// return 'vendor';
}
}
},
},
// 图片内容小于 4kb 就转化成 base64
assetsInlineLimit: 4096000,
// 打包后的文件夹名称，不配置默认是 dist
// outDir: 'testDist',
// assetsDir: "static",//配置输出目录中的静态资源目录
emptyOutDir: true,//清除输出目录的所有文件，默认就是 true
},
plugins: [
myViteAliases(), //设置别名
CreateHtmlPlugin({ //修改 html 内容
inject: {
data: {
title: 'lijian'
}
}
}),
// viteMockServe(), //开启 mock 测试
VitePluginMock(),
// typescript 检测
checker({
// typescript: true, // 配合在package.json 中 添加 tsc --noEmit 使用
}),
// 代码压缩
viteCompression({
verbose: true, // 是否在控制台输出压缩结果
disable: false, // 是否禁用
threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b
algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
ext: '.gz', // 生成的压缩包后缀
deleteOriginFile: false //压缩后是否删除源文件
}),
// 配置 cdn
viteCDNPlugin({
modules: [
{
// 模块名称
name: 'lodash',
// 全局导出的名称
var: '_',
// cdn 地址
path: 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js'
}
]
})
],
// 开发服务器中的配置
server: {
// 配置跨域解决方案
proxy: {
"/api": {
target: "http://www.360.com",
changeOrigin: true,
rewrite: (path) => {
console.log('path', path, path.replace(/^\/api/, ''));
return path.replace(/^\/api/, '')
}
}
}
}
})
vite.config.js
import { defineConfig } from "rollup";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import viteProdConfig from "./vite.prod.config";
// 策略模式
const envResolve = {
"build": () => {
console.log('生产环境');
return Object.assign({}, viteBaseConfig, viteProdConfig)
},
"serve": () => {
console.log('开发环境');
return Object.assign({}, viteBaseConfig, viteDevConfig)
}
}
export default defineConfig(({ command, mode }) => {
// command: ' build | serve ', 'build' 代表生产环境， 'serve' 代表的开发环境
return envResolve[command]()
})
