VUE遇过的问题及解决方案记录稿

vue3+vite+ts+elementplus

1、关于初建项目打包

要新建env.production的配置文件

vite build 默认打包的配置是production

除非自行修改打包文件，方法之一，修改打包命令vite build --mode development

这个打包的配置文件是开发环境的，配置文件主要内容是请求地址，访问项目的根路径，也可能涉及一些全局系统变量（如：同一个系统多家部署，涉及多个公共模块的不同展示方式，可进行对应不同的配置）

2、关于项目部署上线后页面空白问题

需要配置  vite.config.ts 增加 base: './'

还有router.ts

history: createWebHistory('./')

是因为打包后的index.html 访问的资源地址是./xxxxxxx

项目在根目录运行的路径是‘/’

如果放二级目录，可在env当中配置访问目录，如：VITE_PUBLIC_PATH = ‘/test'

然后将vite.config.ts 中。base: env.VITE_PUBLIC_PATH

router.ts   改成

const router = createRouter({

        history: createWebHistory(import.meta.env.VITE_PUBLIC_PATH),

        routes

})

3、当el-form 中仅有一个el-input 输入框的时候，点击回车会刷新整个页面？

原因：当el-form 中仅有一个el-input 的时候，点击回车会默认触发提交事件，导致页面刷新。有多个el-input 是不会出发的。

解决方案：可以在el-form上加@submit.native.prevent，或者给el-input加@keydown.enter.native.prevent来阻止表单提交。