Vue.js - 解决项目部署到Spring Boot中无法加载static文件夹里图片的问题

作者: hgweb 发布时间: 2019-12-26 浏览: 85 次 编辑

1,问题描述

(1)项目采用 Spring Boot + Vue.js 前后端分离开发,整合部署。之前一直使用正常,但最近对 Spring Boot 端配置了 server.servlet.context-path。也就是说最终访问路径如下:

(2)但访问页面时发现一些图片文件显示不出来(引用的是 static 文件夹下的图片):

原文:Vue.js - 解决项目部署到Spring Boot中无法加载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>

(2)而配置了 context-path 后,SpringBoot 端的上下文访问路径发生了变化。使用 /static 自然获取不到对应的文件夹。

原文:Vue.js - 解决项目部署到Spring Boot中无法加载static文件夹里图片的问题

3,解决办法

(1)我们可以使用自定义别名的方法解决 devbuild 两边路径不一致的问题。编辑 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 开发模式运行也是没有问题的)。


原文出自:www.hangge.com 转载请保留原文链接:https://www.hangge.com/blog/cache/detail_2637.html