vue项目之webpack打包静态资源路径不准确的问题

目录

webpack打包静态资源路径不准确问题静态资源找不到如js文件图片找不到webpack中的静态资源处理Webpacked 资源资源处理规则在javascript里获取资源路径"真实的" 静态资源

webpack打包静态资源路径不准确

问题

1.将打包好的项目部署到服务器，发现报错说图片找不到。

2.静态资源如js访问不到

s.id + '.jpg') }}

"真实的" 静态资源

作为对比，在static/下的文件都不会被Webpack处理：它们使用相同的文件名，直接拷贝到最终的路径。你必须使用绝对路径来引用这些文件，取决于在config.js里面加入的build.assetsPublicPath 和 build.assetsSubDirectory。

举个例子，下面的默认值是：

注意上面的例子，在www.easck.com最终的构建时将会包含./bgs/路径下的所有图片 这是因为Webpack不能猜出来在运行时会用到其中的哪个，所以会包含所有的。

// config/index.jsmodule.exports = { // ... build: {  assetsPublicPath: '/',  assetsSubDirectory: 'static' }}

所有放在 static/目录下的文件都应该是使用绝对URL/static/[filename]引用的。如果你将assetSubDirectory的值改成assets， 那么这些URL就会被变成 /assets/[filename]

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。