why spring-boot does not access the front-end packaged "dist" static resources?
When I import the files which the front-end developer packages the dist
project, and SpringBootApplication
run, I can visit index.html
, but I can't read its static resources, can't show the pic, it's all black. And index.html
source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="apple-touch-icon" href="./pwa-192x192.png">
<link rel="mask-icon" href="./safari-pinned-tab.svg" color="#00aba9">
<meta name="msapplication-TileColor" content="#00aba9">
<script>
(function () {
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
if (setting === 'dark' || (prefersDark && setting !== 'light'))
document.documentElement.classList.toggle('dark', true)
})()
</script>
<script type="module" crossorigin src="./static/js/index-d3549438.js"></script>
<link rel="stylesheet" href="./stati开发者_StackOverflow社区c/css/index-db70e0a5.css">
</head>
<body class="font-sans">
<div id="app"></div>
</body>
</html>
the positions of dist
file : resources/dist
, and my dist
file contains static
file.
And my configuration about SpringApplication is in application.yml
:
Spring:
web:
resources:
static-locations: "classpath:/dist"
And I also add SpringWebMvcConfig.java in my config-files:
@Configuration
@ComponentScan
public class SpringWebMvcConfig extends WebMvcConfigurationSupport {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/dist/**").addResourceLocations("classpath:/dist/");
}
}
If possible, I would really appreciate it if you could help me point out the problem. :)
I can visit "index.html" only use npm
.
I don't know how to set it up the way you want it, but this is how I do it in my project. I copy the files to the resources
folder of the java application. Here an excerpt of my vue.config.js
:
const {defineConfig} = require('@vue/cli-service');
module.exports = defineConfig({
outputDir: 'src/main/resources/public/clientlibs/vue-dist'
});
Then you can access these from the spring templates with: /clientlibs/vue-dist/vue-app.js
精彩评论