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