Vue-cli为Vue项目搭建的脚手架的确很方便,但打包时容易出现空白页,或者对应的静态资源加载不了只,
我是通过将项目/配置下的index.js的assetsPublicPath变成”。/?变成相对路径,进行解决。
你也许会注意到vue-cli与webpack结合的项目中,我们通常会有两个静态资源的路径:和静态/src/资产,他们两者的区别是什么呢?本文主要和大家介绍了vue-cli与webpack结合如何处理静态资源,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。
为了回答这个问题,我们首先要明白Webpack是如何处理静态资源的。在* .vue组件里,所有的模板和CSS模块都被vue-html-loader和css-loader解析来查找路径URL。
举个例子,在<代码> & lt; img src”。/logo.png”祝辞> 背景:url (/logo.png)>
但是因为logo.png并不是JavaScript,所以如果被当成一个依赖的花,我们需要通过url-loader和file-loader来解析它。这个模板已经为你配置了相应的装载机,所以你通常不用担心相对路径的部署问题。
即使这些资源有可能在构建过程中被内联/拷贝/重命名,他们也是源码重要组成部分。这就是为什么我们建议单独在/src文件夹里放置静态资源,如同其他的资源文件夹。
事实上,你都不必把他们全放在/src/资产,你可以根据模块/组件来组织利用他们。比如说,你可以把任一组件放到他们自己的目录,并在该目录下存放静态资源。
相对路径,比如。/资产/logo.png会被解析成模块依赖。它们会被一个基于你Webpack输出配置的自动生成URL替代。
没有前缀的路径,比如资产/logo.png,同相对路径,转义成。/资产/logo.png
有~前缀的路径。~被认为是一个模块请求,同<代码>要求(一些模块/image.png)>
这个资源路径同样会被file-loader处理然后返回处理后的路径。而且Webpack会一次性加载该英国地质调查局目录下的所有图片。
与此相对的,静态/中的文件全都不会被Webpack处理。它们将被直接拷贝到目标文件夹,引用这些文件需要使用绝对路径。
以上所述是小编给大家介绍的vue-cli与webpack处理静态资源的方法及webpack打包的坑,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
