vite.config.ts
import { ConfigEnv, UserConfig, defineConfig ,loadEnv } from 'vite'
import {createVitePlugins} from './build'
import path from 'path'
// https://vite.dev/config/
export default defineConfig(({command,mode}:ConfigEnv) :UserConfig =>{
// 获取环境变量
const env = loadEnv(mode, process.cwd());
const isProd = mode === 'production';
const isBuild = command === 'build';
console.log('env',env);
return {
plugins: createVitePlugins(env,isBuild), // 配置插件,
base: './', // 设置打包路径
resolve: {
alias: {
'@': path.resolve(__dirname,'./src'),// 设置 `@` 指向 `src` 目录
"@assets":path.resolve(__dirname,"./src/assets"),
"@components":path.resolve(__dirname,"./src/components"),
},
// alias: [
// { find: '@', replacement: resolve(__dirname, './src') },
// { find: 'components', replacement: resolve(__dirname, './src/components') },
// { find: 'assets', replacement: resolve(__dirname, './src/assets') },
// ],
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']// 使用路径别名时想要省略的后缀名，可以自己 增减
},
server: {
port:3000, // 设置服务启动端口号
open: true, // 设置服务启动时是否自动打开浏览器
cors: true ,// 允许跨域 // 设置代理，根据我们项目实际情况配置
proxy: {
'/api': {
target: 'http://localhost:3000/', // 代理的目标地址
changeOrigin: true, // 是否修改请求头的origin，让服务器认为这个请求来自本域名
secure: false, // 如果是https接口，需要配置这个参数
rewrite: (path) => path.replace('/api/', '/') // 重写传过来的path路径，比如'/api/index/1?id=10&name=zs'，重写为'/index/1?id=10&name=zs'
}
}
},
//安装对应的scss npm i sass sass-loader -D
// @import 已经被弃用 改用 @use
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/style/variables.scss" as *;'
}
}
},
build: {
outDir: 'dist', // 指定打包路径，默认为项目根目录下的dist目录
assetsDir: 'assets', // 指定生成静态资源的存放路径（相对于 build.outDir）
cssCodeSplit: true, // 如果设置为false，整个项目中的所有 CSS 将被提取到一个 CSS 文件中
sourcemap: false, // 构建后是否生成 source map 文件。如果为 true，将会创建一个独立的 source map 文件
target: 'modules', // 设置最终构建的浏览器兼容目标。默认值是一个 Vite 特有的值——'modules' 还可设置为 'es2015' 'es2016'等
chunkSizeWarningLimit: 550, // 单位kb 打包后文件大小警告的限制 (文件大于此此值会出现警告)
assetsInlineLimit: 4096, // 单位字节（1024等于1kb） 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。
minify: 'terser', // 'terser' 相对较慢，但大多数情况下构建后的文件体积更小。'esbuild' 最小化混淆更快但构建后的文件相对更大。
terserOptions: {
compress: {
drop_console: true, // 生产环境去除console
drop_debugger: true, // 生产环境去除debugger
},
}
}
}
})
需要安装对应的插件
npm install @types/node -D
npm install @vitejs/plugin-vue --save-dev
npm install @vitejs/plugin-vue-jsx --save-dev
npm install unplugin-auto-import -D
npm install unplugin-vue-components --save-dev
npm install element-plus vant // 组件库
npm intall vite-plugin-mock mockjs
build文件夹
import vue from '@vitejs/plugin-vue' // 引入vue插件
import vueJsx from '@vitejs/plugin-vue-jsx' // 引入vueJsx插件
import autoImport from 'unplugin-auto-import/vite'; // 自动导入插件
import Components from 'unplugin-vue-components/vite'; // 自动导入组件库
import { ElementPlusResolver, VantResolver } from 'unplugin-vue-components/resolvers'; // 自动导入ui库
// import { viteMockServe } from 'vite-plugin-mock';
import { ConfigMockPlugin } from './mock' // 引入mock插件
import removeConsole from './remove-console' // 引入自定义removeConsole插件
export function createVitePlugins(viteEnv:any, isBuild: boolean) {
return [
vue(),
vueJsx(),
removeConsole(),
ConfigMockPlugin(isBuild),
autoImport({
// 匹配的文件，也就是哪些后缀的文件需要自动引入
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
/\.md$/ // .md
],
// 自动引入的api从这里找
imports: ['vue', 'vue-router','pinia'],
//会在根目录生成auto-imports.d.ts，里面可以看到自动导入的api
dts: 'src/types/auto-import.d.ts' ,
// 解析器配置
resolvers: [], // 第三方ui
// 根据项目情况配置eslintrc，默认是不开启的
}),
Components(
{
// 匹配的文件，也就是哪些后缀的文件需要自动引入
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
exclude: [/node_modules/, /\.git/, /\.nuxt/], // 排除特
// 使用 globs 指定匹配模式
globs: [
'src/components/**/*.vue', // 匹配 src/components 目录及其子目录下的所有 .vue 文件
// '!src/components/excludeDir/**/*.vue' // 排除特定目录下的文件
],
resolvers:[ElementPlusResolver(),VantResolver()], // 第三方ui
// 配置文件生成位置
dts: 'src/types/components.d.ts',
},
)
]
}
remove-console
自动去除console.log
export default function removeConsole() {
return {
name: "remove-console",
transform(code, id) {
if (id.includes("node_modules")) return;
if(process.env.NODE_ENV === 'production'){
const transformed = code.replace(/console\.log\((.*)\);?/g, '');
return transformed;
}
}
}
}
// Rollup 插件可以有多个生命周期方法，以下是一些常用的方法：
// transform(code, id)：
// 在文件被转换时调用。
// 可以修改文件内容。
// 返回值可以是字符串（转换后的代码）或一个对象 { code, map }（包含代码和源映射）。
// load(id)：
// 在文件被加载时调用。
// 可以返回文件内容或 null 表示无法处理该文件。
// resolveId(source, importer)：
// 在解析模块 ID 时调用。
// 可以返回解析后的 ID 或 null 表示无法解析。
// generateBundle(options, bundle)：
// 在生成打包文件时调用。
// 可以修改打包输出。
mock
import { viteMockServe } from 'vite-plugin-mock';
export const ConfigMockPlugin = (isBuild: boolean) => {
return viteMockServe({
ignore: /^\/_/,
mockPath: 'mock',
enable: !isBuild,
// localEnabled: true, // 开发环境开启mock
// prodEnabled: true, // 生产环境开启mock
watchFiles: true, // 监听 Mock 文件夹中的文件变更
//injectCode 是一个非常有用的配置选项，它允许你在项目中动态注入自定义代码。这在需要根据环境（开发环境或生产环境）动态加载 Mock 数据时非常有用。
// injectCode: `
// import { setupProdMockServer } from '../src/mock';
// setupProdMockServer(); `,
// https://github.com/anncwb/vite-plugin-mock/issues/9
});
};
