why spring-boot does not access the front-end packaged "dist" static resources?_问答_开发者

why spring-boot does not access the front-end packaged "dist" static resources?

开发者 https://www.devze.com 2022-12-07 20:09 出处：网络

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\

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