无法用spring加载外部脚本js文件答案

【问题标题】：Can not load external script js file wtih spring无法用spring加载外部脚本js文件
【发布时间】：2020-05-08 08:05:53
【问题描述】：

结构是：

源代码 -主要的 - 资源 ---vue.html ---example.js

vue.html 是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="./example.js"></script>

    <script>
        alert("I'm active");


    </script>

这适用于警报：我很活跃

但 404 用于

http://localhost:8080/example.js

但是，它给出了错误。同样的错误。

顺便说一句，终点是：

@GetMapping("/vue")
public ModelAndView getAllvue() {

    return new ModelAndView("vue");
}

我去http://localhost:8080/vue但我不能去

http://localhost:8080/vue.js

它给了

Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

但在 intellj 的想法中，当我右键单击 html 并说在浏览器中打开时，它会转到

http://localhost:63343/myproject/templates/vue.html?_ijt=v7rpc3a98pdc66ml94fp8iikn

我的脚本有效。这是**example.js**

alert("This script will load first");

那么，是什么阻碍了我的 js 工作？

这是安全配置：

@Configuration
@EnableWebSecurity
//@EnableWebMvc
public class WebSecurity extends WebSecurityConfigurerAdapter {


@Override
protected void configure(HttpSecurity http) throws Exception {

    String[] resources = new String[]{
            "/",
            "/home",
            "/css/**",
            "/icons/**",
            "/images/**",
            "/resources/**",
            "/static/**",
            "/js/**"
    };

  http.csrf().disable();

    http.authorizeRequests()
            .antMatchers(resources).permitAll()
            .and()
            .formLogin()
            .loginPage("/login")
            .loginProcessingUrl("/authenticateTheUser")
            .defaultSuccessUrl("/dashboard")
            .permitAll();
}

我也尝试过：

<script src="./example.js"></script>
<script src="../example.js"></script>
<script src="/example.js"></script>
<script src="templates/example.js"></script>

【问题讨论】：

标签： javascript java spring vue.js

【解决方案1】：

试试下面的代码来加载静态文件。

@Configuration
//@EnableWebMvc
public class MvcConfig extends WebSecurityConfigurerAdapter implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
            .addResourceHandler("/resources/**")
            .addResourceLocations("/resources/");
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        String[] resources = new String[]{
            "/",
                "/home",
                "/css/**",
                "/icons/**",
                "/images/**",
                "/resources/**",
                "/static/**",
                "/js/**"
        };
        http.csrf().disable();
        http.authorizeRequests()
            .antMatchers(resources).permitAll()
            .and()
            .formLogin()
            .loginPage("/login")
            .loginProcessingUrl("/authenticateTheUser")
            .defaultSuccessUrl("/dashboard")
            .permitAll();
    }
}

并在您的 html 页面中调用它，如 .


<script src="http://localhost:8080/myproject/resources/vau.js"></script>

希望这能解决问题。

【讨论】：

但是 @EnableWebMvc 禁用 MVC 自动配置？
你可以不用这个，因为spring会自动添加这个。
它还为` " rel="stylesheet">`提供Uncaught SyntaxError: Unexpected token '<' >
你也可以保留它，这是用于静态资源的。
我已经更新了代码，你可以扩展和实现两者