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

1，问题描述

• 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>

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

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 开发模式运行也是没有问题的）。