• React+SpringBoot项目部署


     静态资源访问配置 

      https://www.jianshu.com/p/b6e0a0df32ec

     https://segmentfault.com/q/1010000012240531/a-1020000012250927

     _______________________________________________________________________________________________

    springboot-静态资源默认访问路径顺序

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
    本文链接:https://blog.csdn.net/cygodwg/article/details/83271275

    META-INF/resources/hello.html hello.html内容META-INF/resources/hello

    static/hello.html hello.html内容static/hello

    resources/hello.html 内容resources/hello

    public/hello.html 内容public/hello

    访问http://localhost/hello.html

    页面内容META-INF/resources/hello,访问路径是META-INF/resources/hello.html,去掉该html

    再访问http://localhost/hello.html

    内容:resources/hello,访问路径是resources/hello.html去掉该html

    访问http://localhost/hello.html

    内容:static/hello,访问路径static/hello.html,去掉该html

    再访问http://localhost/hello.html

    内容resources/public/hello world,访问路径public/hello world,去掉该html

    由此实验得知静态资源默认访问路径是

    META-INF/resources > resources > static > public

    ________________________________________________________________________________________________

    Springboot 之 静态资源路径配置

     

    1、静态资源路径是指系统可以直接访问的路径,且路径下的所有文件均可被用户通过浏览器直接读取。

    2、在Springboot中默认的静态资源路径有:classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/

    3、在Springboot中可以直接在配置文件中覆盖默认的静态资源路径的配置信息:

    复制代码
    #自定义的属性,指定了一个路径,注意要以/结尾
    web.upload-path=D:/temp/study13/
    #表示所有的访问都经过静态资源路径 spring.mvc.static-path-pattern=/**

    #覆盖默认配置,所以需要将默认的也加上否则static、public等这些路径将不能被当作静态资源路径
    #在最末尾的file:${web.upload-path}中的file:表示是一个具体的硬盘路径,其他的使用classpath指的是系统环境变量
    spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${web.upload-path}
    复制代码

    4、在SpringBoot开发中,可以在Java代码中覆盖默认静态资源配置

    复制代码
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    @Configuration
    public class WebMvcConfig extends WebMvcConfigurerAdapter {
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
    
            if(!registry.hasMappingForPattern("/static/**")){
                registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
            }
            super.addResourceHandlers(registry);
        }
    
    }
    复制代码

     5、由于Spring Boot 默认资源路径配置的问题,使用IDEA开发Spring Boot应用时,会导致一个问题————浏览器、编辑器 不能同时访问 JS 等资源的问题。这时往往通过配置 4 中的代码,来实现同时访问资源文件的效果

    参考知识林:http://www.zslin.com/web/article/detail/23

    _______________________________________________________________________________________________

    首先我用create-react-app搭建了一个react项目(这一步操作大家可以去官网看https://reactjs.org/docs/add-react-to-a-new-app.html)

    你会得到一个结构如下的项目:

     
    image.png

    我们可以通过 yarn start 运行这个项目:


     
    image.png
     
    image.png

    跑起来的页面是这样的:


     
    image.png

    好的,现在你已经成功在开发环境中跑起来了,接下来我们来打包,然后将其部署到服务器上

    打包也很简单,执行 npm run build :

     
    image.png

    你会发现在你的项目文件夹里多了个build文件夹:

     
    image.png
     
    image.png

    然后当你点击index.html之后,会发现打开是这样的:

     
    image.png

    一片空白...然后你检查了了下index.html,发现里面的路径是这样的:

     
    image.png

    发现了啥问题没...里面的路径是绝对路径,所以当然找不到js和css以及图片资源啥的,那怎么让这些路径变成相对路径呢,很简单...我们再package.json加上homepage就行:

     
    image.png

    大家看最后一句就行...然后我们再次打包,然后再点index.html,会发现一切正常:


     
    image.png

    好的,现在我们通过build得到了html页面以及js和css和各种资源...你也发现了,我们网页的入口是index.html

    所以比如说你自己有个服务器地址是 www.abc.com ,你只要在访问www.abc.com的时候把index.html返回出去就行了...因为我自己的服务器是用SpringBoot搭建的,所以我就用SpringBoot来举例子

    SpringBoot返回html页面也很简单,在resource目录下新建一个public文件夹,然后把你React打包的build文件夹里的文件都丢进去就行...(这里截图是我自己的项目,我把一些.js和.json文件去掉了,因为好像没啥用)

     
    image.png

    这个时候你访问www.abc.com他就会直接返回index.html了(注意在SpringBoot里的Controller去掉对"/"的拦截)

    然后你只要把SpringBoot项目部署到服务器上(如何部署SpringBoot项目大家可以看这篇文章https://blog.csdn.net/ruglcc/article/details/76147645),然后访问你的域名,你就可以看到index.html了,比如我刚刚部署的自己的网页www.nanmian.top

    OK这篇文章结束了,大家也发现了目前的网页很简单...就只有一个页面,我刚学前端...所以也不是很懂,不知道之后项目变大了这种方法还行不行...到时候我会再记录的

     ______________________________________________________________________________

  • 相关阅读:
    Electron+Vue开发跨平台桌面应用
    html2canvas生成图片
    将某个DIV内容保存成图片,使用HTML2CANVAS截图方法(高清图并解决图片跨域问题)
    css3实现动画效果完整代码demo
    Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template
    Vue.Draggable学习总结
    3d学习网
    vue router 报错: Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解决方法
    网页适配 iPhoneX,就是这么简单
    关于for循环
  • 原文地址:https://www.cnblogs.com/kelelipeng/p/11424995.html
Copyright © 2020-2023  润新知