情景：

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

而生产环境的url是：

其中【】是配置的生产环境路由。

指向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: '/', 这个表示静态资源部署后的公共路径。 假如应用路径是【】 那么这里就应该配置为'/aaa/bbb/' 如果需要传到cdn,则可以改成