vite是居于ES6模块化的,打包后无法通过file://协议运行(vue cli可以直接本地跑),也就是说打包后无法直接打开index.html,需要基于静态文件服务器才能跑。不过我们也不存在本地跑的情况,要么线上环境开一个nginx跑,要么基于tomcat等服务器来跑。这里为了方便我直接放到SpringBoot项目,跟后端代码共用一个服务器来运行:
1.vite打包
为了打包后的文件可以导航,在vite.config.js文件中配置一下:base:'./',否则会出现空白页。
2.在SpringBoot项目的资源文件夹resources中新建static文件夹,然后把disk里面的文件复制到static文件夹中
3.配置静态文件映射:修改application.yml
spring:
web:
resources:
static-locations: classpath:/static/
4.启动SpringBoot项目,访问启动端口即可访问index.html。
出现问题的同学可以参考这篇实战:使用SpringBoot替代Nginx发布Vue3项目-CSDN博客