zoukankan      html  css  js  c++  java
  • vue,一路走来(10)--生产环境

    生产环境下的一些问题

    使用webpack 打包前端应用后,图片和css、js 资源引用会出问题,
    这源于开发环境的目录和生产环境的路径【url】不同

    比如,开发环境的url是:http://localhost:8080/static/img/122.png

    而生产环境的url是:http://www.xxx.com/dist/static/img/122.png

    二者区别,开发环境是放在域名的根目录,所以不存在引用路径变化的问题。
    如果生产环境不做处理的话,图片等静态文件会自动在相对路径前添加域名。
    比如:

    在样式中:
    background:url(123.png)
    这里会自动被转化为:
    http://www.xxx.com/123.png
    然而,除非项目放在了域名根目录下,一般情况这路径是不对的。因为有可能会有多个项目同在,所以一般不会直接放在根目录下。
    

    解决方案:
    webpack 是个优秀的打包工具,肯定有相关的配置的。
    在build配置脚本中,就有相关配置项:  

    修改成如下图

    然而这样修改后,还是有点小问题,如下图:

    这样的图片路径是访问不到的,需要新建static文件夹

    这样在开发环境就访问得到了。

    可是在打包成生产环境还得再改一下,

    这样有点不是很合理,2种环境不能同时兼容,暂时还没找到更好的办法。

  • 相关阅读:
    hello fetch
    git 基础命令
    拜占庭将军
    如何学习区块链
    简单的理解区块链技术
    使用AOP统一验签和校参
    为每个请求分配traceId的两种方式及父子线程本地变量传递
    监听kafka消息
    JVM OOM分析与调优
    JVM内存结构
  • 原文地址:https://www.cnblogs.com/juewuzhe/p/7081881.html
Copyright © 2011-2022 走看看