摘要：情景使用打包前端应用后，图片和资源引用会出问题，这源于开发环境的目录和生产环境的路径不同比如，开发环境的是而生产环境的是其中是配置的生产环境路由。表示静态文件打包后存放的子目录，这个表示静态资源部署后的公共路径。
情景：
使用webpack 打包前端应用后，图片和css、js 资源引用会出问题，
这源于开发环境的目录和生产环境的路径【url】不同
比如，开发环境的url是：
http://localhost:8088/static/...
而生产环境的url是：
http://www.xxx.com/aaa/bbb/st...
其中【http://www.xxx.com/aaa/bbb/】是配置的生产环境路由。
指向express服务器。
二者区别，开发环境是放在域名的根目录，所以不存在引用路径变化的问题。
如果生产环境不做处理的话，图片等静态文件会自动在相对路径前添加域名。
比如：
在样式中写到： background:url(abc.png) 这里会自动被转化为： http://www.xxx.com/abc.png 然而，除非项目放在了域名根目录下，一般情况这是路径是不对的。
解决方案：
webpack 是个优秀的打包工具，肯定有相关的配置的。
在build配置脚本中，就有相关配置项：
其中： index: path.resolve(__dirname, "../dist/index.html"),
表示，打包后的入口index.html文件存放的位置，这里表示，在dist目录下。
assetsRoot: path.resolve(__dirname, "../dist")
表示，打包后埔静态资源文件存放的根目录，表示同样是dist目录。
assetsSubDirectory: "static",
表示静态文件打包后存放的子目录，"/static"
assetsPublicPath: "/",
这个表示静态资源部署后的公共路径。
假如应用路径是【http://www.xxx.com/aaa/bbb/】
那么这里就应该配置为"/aaa/bbb/"
如果需要传到cdn,则可以改成http://stacic.xxx.com/aaa/bbb/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82101.html
摘要：的生产环境优化完整配置的可以参考本文主要介绍了生产环境我都做了哪些优化文章的结构如下静态资源路径。分配不同的关于稳定性的坑注意区分整个项目有变动时，变化。而生产环境可以这一项，因为我们不需要在生产环境调试代码。 webpack4 的生产环境优化 webpack4完整配置的可以参考： https://github.com/ziwei3749/... 本文主要介绍了 webpack4 生产...
摘要：浏览器缓存简单介绍下面来简单介绍一下浏览器缓存，以及为何我要在标题中强调该去则去，该留则留。但后来我还是反转了自己，这种方法虽然能留下浏览器缓存，却做不到该去则去。 本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000010317802如果您对本系列文章感兴趣，欢迎关注订阅这里：h...
摘要：浏览器缓存简单介绍下面来简单介绍一下浏览器缓存，以及为何我要在标题中强调该去则去，该留则留。但后来我还是反转了自己，这种方法虽然能留下浏览器缓存，却做不到该去则去。 本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000010317802如果您对本系列文章感兴趣，欢迎关注订阅这里：h...
摘要：博主最近在学习，顺便搭建了一个基于的前端项目架构在此写文记录一下，同时教会新入坑的小伙伴们如何在项目中玩弄，额玩转。所以开发环境中会有一个目录用于我们开发还有一个用来存储处理后的的模板文件。 博主最近在学习react redux，顺便搭建了一个基于webpack的前端项目架构,在此写文记录一下，同时教会新入webpack坑的小伙伴们如何在项目中玩弄，额！玩转webpack。github...
阅读 2305·2021-09-28 09:45
阅读 3596·2021-09-24 09:48
阅读 2256·2021-09-22 15:49
阅读 3093·2021-09-08 16:10
阅读 1586·2019-08-30 15:54
阅读 2317·2019-08-30 15:53
阅读 3012·2019-08-29 18:42
阅读 2864·2019-08-29 16:19
