Vue3+vite打包设置及部分打包优化~
这里先容的是vite项目标打包设置，若想了解webpack打包设置可看我的其他博客。（下面来先容下vite打包设置的步骤）1、步骤一：设置base。(为什么需要设置base？这里设置base主要是修改根路径，一般我们在开发情况中引用静态资源可能使用的是绝对路径，但是一旦打包摆设到服务器上后可能会报404,无法正确的获取的资源。)
//在vite.config.ts中
import { defineConfig } from 'vite'
export default defineConfig({
//配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径
base:"./",
})
2、步骤二：可根据需要设置组件及静态资源路径别名（若设置了路径别名使用方法和typescript的类型别名一样，直接更换原路径即可）
//在vite.config.ts中
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
//配置组件路径别名需引入resolve
import{resolve} from 'path'
export default defineConfig({
//配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径
base:"./",
// 路径别名
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
// 组件路径别名,语法：别名：resolve(__dirname,'组件原路径')
com:resolve(__dirname,'src/component'),
//静态资源路径别名
'./image':'src/assets'
}
}
}) 3、步骤三：设置生产情况移除console.log。
//在vite.config.ts中
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import{resolve} from 'path'
export default defineConfig({
//配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径
base:"./",
// 路径别名
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
// 组件路径别名,语法：别名：resolve(__dirname,'组件原路径')
com:resolve(__dirname,'src/component'),
//静态资源路径别名
'./image':'src/assets'
}
},
// 生产环境移除console.log的配置
build:{
// 默认是esbuild,但这里需要改成terser，并且想使用terser的话，需提前安装，命令为npm add -D
//terser
minify:"terser",
terserOptions: {
compress: {
//生产环境时移除console
drop_console: true,
drop_debugger: true,
},
},
}
})
4、步骤四：设置署理办理跨域。（使用方法与webpack办理跨域一样）
//在vite.config.ts中
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import{resolve} from 'path'
export default defineConfig({
//配置根路径，解决部署到服务器之后绝对路径会报404问题，所以需改为相对路径
base:"./",
server: {
proxy: {
// 字符串简写写法，其他方法可看vite官网，使用方法与webpack解决跨域一样
'/foo': 'baseURL地址',
}
},
// 路径别名
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
// 组件路径别名,语法：别名：resolve(__dirname,'组件原路径')
com:resolve(__dirname,'src/component'),
//静态资源路径别名
'./image':'src/assets'
}
},
// 生产环境移除console.log的配置
build:{
// 默认是esbuild,但这里需要改成terser，并且想使用terser的话，需提前安装，命令为npm add -D terser
minify:'terser',
terserOptions: {
compress: {
//生产环境时移除console
drop_console: true,
drop_debugger: true,
},
},
}
})
5、打包优化，使用CDN分发。（忽略，背面更新）
//安装cdn插件
npm install vite-plugin-cdn-import --save-dev //引入插件，在vite.config.ts中
//import importToCDN from "vite-plugin-cdn-import"
//或
import { Plugin as importToCDN } from "vite-plugin-cdn-import" 6、代码压缩。
npm i vite-plugin-compression -D //在vite.config.ts中
import viteCompression from 'vite-plugin-compression'
//在plugins中配置即可
plugins: [
viteCompression(),
] 7、图片压缩。
npm i vite-plugin-imagemin -D //在vite.config.ts中
import viteImagemin from 'vite-plugin-imagemin'
//在plugins下写
viteImagemin({
gifsicle: {
optimizationLevel: 7,
interlaced: false
},
optipng: {
optimizationLevel: 7
},
mozjpeg: {
quality: 20
},
pngquant: {
quality: ,
speed: 4
},
svgo: {
plugins: [
{
name: 'removeViewBox'
},
{
name: 'removeEmptyAttrs',
active: false
}
]
}
})
8、打包下令设置。
//在package.json中
"build": "vite build",
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]