Vue.js - 解决项目部署到Spring Boot中无法加载static文件夹里图片的问题
1,问题描述
(1)项目采用 Spring Boot + Vue.js 前后端分离开发,整合部署。之前一直使用正常,但最近对 Spring Boot 端配置了 server.servlet.context-path。也就是说最终访问路径如下:- http://ip:端口号/项目名/index.html
(2)但访问页面时发现一些图片文件显示不出来(引用的是 static 文件夹下的图片):
2,问题原因
(1)原先在 Vue 项目中我是使用如下方式引用 static 文件夹下的资源:
<template> <div id="app" class="flex flex-direction-column"> <header> <span style="height:100%;display:inline-block;vertical-align:middle"></span> <img src="/static/images/header_title.png" style="vertical-align:middle"> </header> <div id="title"> hangge.com </div> <article class="flex flex-grow"> <Navigation id="navigation"></Navigation> <router-view/> </article> </div> </template> <script> import Navigation from './components/Navigation' export default { name: 'App', components: { Navigation } } </script> <style> @import "../static/global.css"; </style> <style scoped> #title { background-image: url('/static/images/title_bg1.png'), url('/static/images/title_bg2.png'); background-position: left top, right bottom; background-repeat: no-repeat, repeat-x; } </style>
3,解决办法
(1)我们可以使用自定义别名的方法解决 dev 和 build 两边路径不一致的问题。编辑 build 文件夹下面的 webpack.base.conf.js 文件,添加 static 别名:
resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'static':path.resolve(__dirname, '../static'), } },
(2)然后前台改用 ~static 来引入文件路径:
<template> <div id="app" class="flex flex-direction-column"> <header> <span style="height:100%;display:inline-block;vertical-align:middle"></span> <img src="~static/images/header_title.png" style="vertical-align:middle"> </header> <div id="title"> hangge.com </div> <article class="flex flex-grow"> <Navigation id="navigation"></Navigation> <router-view/> </article> </div> </template> <script> import Navigation from './components/Navigation' export default { name: 'App', components: { Navigation } } </script> <style> @import "../static/global.css"; </style> <style scoped> #title { background-image: url('~static/images/title_bg1.png'), url('~static/images/title_bg2.png'); background-position: left top, right bottom; background-repeat: no-repeat, repeat-x; } </style>
(3)再次打包部署,可以看到图片已经可以正确加载了(当然使用 npm run dev 开发模式运行也是没有问题的)。