使用 vue3 动态组件结合 vite 开发环境变量控制代码打包

218 阅读1分钟

在使用vue3开发聊天程序时, 因为在开发环境有特殊的数据控制界面, 在发布时需要屏蔽掉, 但是这些开发界面还是被打包了.

怎么避免开发环境的界面代码, 被打包? 即,dev组件相关的代码, 怎么避免被打包?

如果是在代码中使用静态import 是无法避免代码被打包的, 需要使用 vue 的动态组件component, 以及vitedefine选项来解决.

vite 的 define: 定义全局常量替换方式。其中每项在开发环境下会被定义在全局,而在构建时被静态替换。

image.png

dev组件的截图:

image.png

dev组件代码被打包的处理图:

image.png

dev组件代码不被打包的处理图:

image.png