前言
根据上一篇webpack打包优化之后,想将成果物在本地打开运行,发现只能展示空白页面。为何将成果包扔在线上可以正常运行呢,本文探讨一下。
本地运行
打包后的成果物文件如下图所示。
直接打开index.html文件,页面显示空白。
去网上搜了一下原因,发现是资源路径的问题,具体讲述可看下面这篇别人写的文章。
我改了个属性pulicPath: ‘./’, 重新打包后可正常展示页面。涉及到路由的操作可自己尝试,我没有试过。
文章链接: https://www.jianshu.com/p/8bfcae1ddc90
线上运行
将成果包扔到线上怎么可以正常运行呢,我是丢在的80端口,这里可以查看nginx的默认配置。
网址中输入ip:80端口号,会自动加载html文件夹路径下的index.html文件,根路径是html文件夹。index.html文件中引入的相关资源,比如 /js/bundle.js,此资源在html文件夹下可以找到,就可以正常加载资源进行页面显示。
总结
打包的产物在本地运行和在线上环境运行的原理一样,只要引入的资源路径正确,就可以正常加载与展示。