Vite打包配置
Vite打包配置
1.项目启动自动打开网页
{"scripts": {"dev": "vite --open"}
}
2.base配置打包公共路径
配置base选项的作用主要是指定项目在开发或生产环境中的公共基础路径。这个配置项对于确保资源能够正确加载尤为关键，尤其是在项目被部署到子路径的情况下。
'base:'/finyou'
例如，如果项目被部署到服务器的/my-app/路径下，那么可以在vite.config.ts或vite.config.js文件中配置base为’/my-app/'。这样，在开发环境中，Vite开发服务器就会以这个基础路径来提供资源；在生产环境中，构建后的资源也会包含这个基础路径，从而确保它们能够被正确加载和访问。
3.alias配置路径别名
//不配置情况
import HelloWorld from './components/HelloWorld.vue'
//配置后的情况
import HelloWorld from '@/components/HelloWorld.vue'
resolve:{alias:{'@':resolve(__dirname,'src'),//配置图片别名"@img":resolve(__dirname,'src/assets')}}
如果你是ts项目还需而外配置,不然进行ts检查会报错
//tsconfig.app.json
"baseUrl": ".","paths": {"@/*": ["src/*"]}
4.生产环境时移除console.log的配置
默认为 Esbuild它比 terser 快 20-40 倍，压缩率只差 1%-2%。
terser
使用terser需要安装terser
npm add -D terser
build:{minify:'terser',terserOptions:{compress:{ drop_console:true, drop_debugger:true}}}
Esbuild（开发环境也没用）
esbuild: {drop: ['console', 'debugger'],
}
element-plus按需引用
不用在main.ts中导入element-plus
npm install -D unplugin-vue-components unplugin-auto-import
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})
mock数据配置
npm i vite-plugin-mock mockjs -D
[vite-plugin-mock配置](vite-plugin-mock/README.zh_CN.md at main · vbenjs/vite-plugin-mock)
前端跨域代理
export default defineConfig({server: {proxy: {// 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo'/foo': 'http://localhost:4567',// 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},// 正则表达式写法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/'^/fallback/.*': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/fallback/, ''),},// 使用 proxy 实例'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,configure: (proxy, options) => {// proxy 是 'http-proxy' 的实例}},// 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io// 在使用 `rewriteWsOrigin` 时要特别谨慎，因为这可能会让代理服务器暴露在 CSRF 攻击之下'/socket.io': {target: 'ws://localhost:5174',ws: true,rewriteWsOrigin: true,},},},
})
CDN配置
npm install vite-plugin-cdn-import --save-dev
cdn({modules:[{name: 'vue',var: 'Vue',path: 'https://unpkg.com/browse/vue@3.5.12/dist/vue.cjs.js'},{name: 'element-plus',var: 'ElementPlus',path: 'https://unpkg.com/browse/element-plus@2.8.6',css:'https://unpkg.com/browse/element-plus@2.8.6/dist/index.css'},]})
app.use(ElementPlus)
Gzip代码压缩
npm i vite-plugin-compression -D
import viteCompression from 'vite-plugin-compression';
export default () => {return {plugins: [viteCompression()],};
};
仍然需要nginx开启gzip压缩，浏览器才会走gzip压缩
图片打包(包下载失败)
[文档](vite-plugin-imagemin/README.zh_CN.md at main · vbenjs/vite-plugin-imagemin)
npm i vite-plugin-imagemin -D