Vue编写的页面部署到springboot网站项目中出现页面加载不全问题

 

问题描述:

在用Vue脚手架 编写出一个页面之后, 部署到后台项目中, 因为做的是一个页面 按理来说 怎么都能够在服务器上运行 , 我也在自己的node环境测试 , 在同学的springboot上运行 ,但是放到公司的大项目中就出现了问题 只能加载出来头部内容 , 其他内容消失不见了

发现问题所在

F12

我F12查看界面结构 , 发现App.vue 这个文件的内容都加载出来了 , 其他的组件还有一些其他的东西都没有 .

需要重写

我不得不重新编写一遍 , 这次不使用脚手架 , 就像 jquery 一样, 直接引入cnd , 这样写不需要编译 , 方便发布 ,但是 需要自己配置所有的东西 , 我对于这样的写法不是很熟练

开始重构

从0开始写 ,首先要写index.html 作为入口文件 , 我准备把脚手架的入口文件复制过去的时候发现 App.vue 这个文件内有个 <router-View/>

这个是用来渲染路由的 ,路由的界面都在 <router-View>这个标签内加载

但是我F12浏览元素 , 缺失的正好是这一部分

路由

后来我把<router-View>需要渲染的文件直接替换到<router-View>的位置

这样我的程序就没有默认路由了, 我问管理后台的同学:'' 你这个项目有路由吗? 是不是路由结构的问题? '' 开始我以为是后台路由的问题 ,现在看来是我自己的问题 ,

因为我用了脚手架的默认路由 , 而我开发的仅仅只是 这个项目其中的一个界面 ,

因此服务程序 识别路由的时候识别不出来我的默认路由 ,因为我在人家的项目里不是默认路由 ,只是一个子路由 ,但在我自己的程序中 ,我是默认路由 ,因此 路由之间出现了渲染不出来的问题

结论

如果用vue写一个小界面,就不要用脚手架了 ,除非这个项目就是vue项目 ,如果是其他技术开发的 ,或者是很久之前开发的项目 ,只是向其添加功能和界面 ,还是用cnd把 ,不需要编译 也不会出现上述问题