相较于【vue-cli或webpack】,vite内置了常用配置,无需开发者重写,更多精细优化需自行配置
1、项目打包完运行空白
引用资源路径问题,打包完的【index.html】文件引用其他文件的引用地址不对
参考配置:https://cn.vitejs.dev/config/shared-options.html#base
修改vite.config.js
js
export default defineConfig({
base: './'
})
2、路由模式
路由分为 hash
和 history
-
hash:地址携带
#
,正常打包可访问,前端测试开发阶段使用 -
history:地址栏会改变,可以使用浏览器的【返回】按钮,需要服务器端的支持,需要【后端或运维】做相关配置,做一下路径重定向问题
3、安装可视化插件
npm install rollup-plugin-visualizer
4、路由懒加载
js
export const Routes = [
{
path: '/xxx',
component: Xxxx,
children: [
{
// 懒加载写法
component: () => import('@/xxx/xxx')
}
]
},
...
]
5、压缩文件gzip
需要后端服务支持
npm install vite-plugin-compression
js
import viteCompression from 'vite-plugin-compression'
import { visualizer } from 'rollup-plugin-visualizer'
// 方式一
export default defineConfig({
plugins: [
// 可视化
visualizer({ open: true }),
// 打包大文件成gzip
viteCompression({
verbose: true, //控制台显示结果
disable: false, //开启还是禁用
threshold: 1024, //体积限制
algorithm: 'gzip', //压缩算法
etx: '.gz' //文件后缀名
}),
]
})
// 方式二
export default defineConfig(({ command, mode }) => {
return {
plugins: [
viteCompression()
...
]
}
})