web静态资源处理：相对路径和绝对路径的引用—css资源404
Author：zhoulujun Date：
webpack静态资源处理，这里略过，感兴趣，请看：https://www.zhoulujun.cn/html/tools/Bundler/webpack/
对于静态资源打包，https://webpack.docschina.org/configuration/output/ 看了这个文档打包出来，放到服务器上还是会遇到一系列问题
其实重点就这个几个点：
output.path：webpack打包输出地址
output.publicPath：此选项指定在浏览器中所引用的「此输出目录对应的公开 URL」
配置好这些，对于在域名首页下的单面，基本没有啥的问题，但是二级、三级等子目录下的页面，会有各种问题。这里逐一展开。
系统中的相对路径和绝对路径
相对路径：相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。使用相对路径可以为我们带来非常多的便利。
相对路径简而言之就是相对自己所在的目录来引用其他文件，比如：
“. ./“ 代表当前文件的上一级目录
“./” 代表当前文件所在目录
绝对路径：绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
绝对路径就是相对根目录（磁盘）开始，每个文件使用的路径都是一样的。
web页面中的相对路径与绝对路径
前端开发中使用相对路径的地方无非就两处：
html 文件中引入资源（js、css、img等）
css 文件中引入背景图片background-image
html 和css 中引用资源时
相对路径都是相对文件本身路径
绝对路径都是网页 URL的根路径
不管是相对路径还是绝对路径，两者情况大体相同：
html 中引入的资源（包括js、css、img）
相对路径：相对的是 网页本身的 URL，即 http://example.com/beta/test
绝对路径：相对的是 网页 URL 的根路径，即 http://example.com
css 中引入的资源
相对路径：相对的是 css 文件本身的 URL，即 http://example.com/beta/index...
绝对路径：相对的是 网页 URL 的根路径，即 http://example.com
public/static/assets目录的区别
assets 目录，在编译过程中会被 webpack 处理，当做模块依赖，只支持相对路径的形式。一般放置可能会变动的文件。
static 目录，一般存放第三方文件，不会被 webpack 解析，会直接被复制到最终的打包目录（默认是 dist/static ）下，必须使用绝对路径引用，这些文件是不会变动的。
使用相对路径，还是会被webpack处理
public 目录，任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack 。需要通过绝对路径来引用。其实是和static目录是一样的，只是命名不同而已。
css样式文件资源引入路径404解决办法：
最简单的办法就是把图片字体都打包程base64。
如果不是做base64转换呢？
在 webpack 5 之前，我们可以用 file-loader 或 url-loader 处理这些字体文件，但在 webpack 5 中，我们已经没有必要再去安装对应的 loader 了，因为我们可以使用 Asset Modules 来处理这些文件。
Webpack 4
raw-loader（将文件导入为字符串）
file-loader（将文件发送到输出目录）
url-loader（将文件发送到输出目录，或转为 Data URI 内联到 bundle 中）
Webpack 5
asset/resource 发送一个单独的文件并导出 URL（之前通过使用 file-loader 实现）
asset/inline 导出一个资源的 data URI（之前通过使用 url-loader 实现）
asset/source 导出资源的源代码（之前通过使用 raw-loader 实现）
asset 在导出一个 data URI 和发送一个单独的文件之间自动选
比如：
module: {
rules: [
// ...
{ // 添加字体文件的处理规则
test: /.ttf|eot|woff2?$/i,
type: 'asset/resource',
generator: {
// 输出到 font 目录中，占位符 [name] 保留原始文件名，
// [hash] 防止出现相同文件名无法区分，[ext] 拿到后缀名
filename: 'font/[name].[hash:6][ext]'
}
}，
{ //图片处理
test: /\.(png|jpg|gif)$/,
type: 'asset/resource', // (webpack 5)
},
]
}解决css静态路径404问题
第一需要设置 css输出路径，比如 vue-cli：
直接修改webpack 配置如下：
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "/public/path/to/",
},
},
"css-loader",
],
},
],
},替换css里面静态资源路径(font/背景图片)
网上给的方案是这个：https://www.npmjs.com/package/webpack-plugin-replace-css-url
其实可以用这样解决：
const { extname } = require('path');
class ReplaceCSSStaticUrlPlugin {
apply(compiler) {
// emit: 在生成资源并输出到目录之前
compiler.hooks.emit.tapAsync('ReplaceCSSStaticUrlPlugin', (compilation, callback) => {
const assets = Object.keys(compilation.assets);
const assetsLen = assets.length;
for (let i = 0; i < assetsLen; i++) {
const fileName = assets[i];
const name = extname(fileName);
if (extname(fileName) !== '.css') {
continue;
}
const asset = compilation.assets[fileName];
let minifyFileContent = asset.source().toString()
.replace(
/\{\{\s*BK_STATIC_URL\s*\}\}/g,
() => '../../',
);
/*minifyFileContent.replace(/url\(static\/img\/iconcool/g,($1,$2)=>{//正则替换})*/
if(process.env?.version ==='open'){
minifyFileContent = minifyFileContent.replace('url(static/img/iconcool', 'url(../img/iconcool')
// 设置输出资源
compilation.assets[fileName] = {
// 返回文件内容
source: () => minifyFileContent,
// 返回文件大小
size: () => Buffer.byteLength(minifyFileContent, 'utf8'),
};
}
callback();
});
}
}
module.exports = ReplaceCSSStaticUrlPlugin;参考文章：
web相对路径和绝对路径的区别-前端开发（文件路径,图片路径） https://blog.csdn.net/qq_41271393/article/details/89577063
解惑页面中的相对路径和绝对路径 https://segmentfault.com/a/1190000007491687
转载本站文章《web静态资源处理：相对路径和绝对路径的引用—css资源404》,
请注明出处：https://www.zhoulujun.cn/index.php?m=content&c=index&a=show&catid=186&id=8788