Der Bildpfad ist nach der vue-cli3-Paketierung falsch

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie entstehen auch verschiedene Frameworks und Tools. In dieser Zeit großer Wellen ist Vue.js zweifellos eine Existenz, die nicht ignoriert werden kann. Da Vue.js jedoch immer beliebter wird, werden wir auf einige Probleme stoßen. In diesem Artikel wird das Problem falscher Bildpfade bei der Verwendung von vue-cli3 zum Paketieren von Projekten vorgestellt und einige Lösungen bereitgestellt.

Problembeschreibung

Wenn wir vue-cli3 für die Projektentwicklung verwenden, können wir normalerweise das img-Tag verwenden, um Bilder einzuführen. Zum Beispiel: img 标签来引入图片。例如：

<img src="./assets/img/logo.png" alt="logo" />

这里假设 logo.png 图片位于项目的 assets 目录下。在运行 npm run serve 命令时，该图片可以正确显示。但是，当我们运行 npm run build 命令进行打包后，我们访问打包后的页面却发现图片无法正常显示，通过浏览器的开发者工具，我们可以发现其实图片加载失败了，并且控制台给出了如下错误信息：

http://your-domain.com/img/logo.4aebf758.png 404 (Not Found)

这里的 http://your-domain.com 是指打包后项目的根目录路径。

造成这个问题的原因

我们知道，Vue.js 基于组件化的开发模式，一般情况下，每个组件都是一个单独的文件，包括 HTML 模板、CSS 样式、JavaScript 代码等。在 Vue.js 的开发过程中，我们通常会使用 webpack 打包工具来进行构建打包。由于 webpack 文件打包的机制，它会将每个组件所需的所有资源打包到相应的 JavaScript 文件中，而浏览器仅能通过 HTTP 请求获取到静态资源，因此 webpack 打包时会将资源文件（包括图片）的路径转换为 HTTP 请求路径。

换句话说，当我们使用相对路径来引用资源文件时，在项目运行时该图片会在 http://localhost:8080 根目录下搜索，而在打包时，图片的路径已经被 webpack 打包为新的路径，并放在了根目录下的 img 目录下。因此，我们在使用 webpack 打包后的文件时，需要针对路径进行修改。

解决方案

修改静态资源根路径

我们可以通过修改 vue.config.js 中 publicPath 字段的值来替换根路径，从而解决路径错误的问题。

首先，在项目根目录中新建 vue.config.js 文件，并输入如下代码：

module.exports = {
  publicPath: './'
}

这里的 publicPath 实际上就是设置了打包后的静态资源存放路径，上述代码表示静态资源和 index.html 存放在同一个目录下。

使用绝对路径引用图片

除了通过修改 publicPath 来解决问题，我们还可以直接使用绝对路径来引用图片，这样就避免了由相对路径带来的问题。例如：

<img src="/img/logo.4aebf758.png" alt="logo" />

这里的 / 表示项目根路径，通过此方式引用的图片不会受相对路径的影响。

将图片文件放置在公共目录下

我们也可以将图片文件放置在 /publicrrreee

Dabei wird davon ausgegangen, dass sich das Bild logo.png im Verzeichnis assets des Projekts befindet. Das Bild wird korrekt angezeigt, wenn der Befehl npm run servo ausgeführt wird. Wenn wir jedoch den Befehl npm run build zum Packen ausführen, besuchen wir die gepackte Seite und stellen fest, dass das Bild nicht normal angezeigt werden kann. Über die Entwicklertools des Browsers können wir feststellen, dass das Laden des Bildes fehlschlägt. Und die Konsole gab die folgende Fehlermeldung aus:

rrreee

http://your-domain.com bezieht sich hier auf den Stammverzeichnispfad des gepackten Projekts.

Der Grund für dieses Problem🎜🎜Wir wissen, dass Vue.js auf dem Komponentenentwicklungsmodell basiert. Im Allgemeinen ist jede Komponente eine separate Datei, einschließlich HTML-Vorlagen, CSS-Stilen, JavaScript-Codes usw. Während des Entwicklungsprozesses von Vue.js verwenden wir normalerweise das Webpack-Paketierungstool zum Erstellen und Verpacken. Aufgrund des Webpack-Dateipaketierungsmechanismus werden alle von jeder Komponente benötigten Ressourcen in die entsprechende JavaScript-Datei gepackt, und der Browser kann statische Ressourcen nur über HTTP-Anforderungen abrufen, sodass Webpack die Ressourcendateien (einschließlich Bilder) verpackt Pfad ist in einen HTTP-Anfragepfad umgewandelt. 🎜🎜Mit anderen Worten: Wenn wir relative Pfade verwenden, um auf Ressourcendateien zu verweisen, wird das Bild im Stammverzeichnis von http://localhost:8080 gesucht, wenn das Projekt ausgeführt wird, und beim Packen wird Das Bild Der Pfad wurde von Webpack als neuer Pfad gepackt und im Verzeichnis img im Stammverzeichnis abgelegt. Wenn wir Webpack-gepackte Dateien verwenden, müssen wir daher den Pfad ändern. 🎜🎜Lösung🎜

Ändern Sie den Stammpfad statischer Ressourcen

🎜Wir können den Stammpfad ersetzen, indem wir den Wert des Felds publicPath in vue.config.js , wodurch das Problem falscher Pfade gelöst wird. 🎜🎜Erstellen Sie zunächst eine neue Datei <code>vue.config.js im Stammverzeichnis des Projekts und geben Sie den folgenden Code ein: 🎜rrreee🎜Der publicPath legt hier tatsächlich die gepackte statische Ressource fest Speicherpfad. Der obige Code gibt an, dass statische Ressourcen und index.html im selben Verzeichnis gespeichert sind. 🎜

Verwenden Sie absolute Pfade zum Referenzieren von Bildern

🎜Zusätzlich zur Lösung des Problems durch Ändern von publicPath können wir auch absolute Pfade direkt zum Referenzieren von Bildern verwenden und so die durch relative Pfade verursachten Probleme vermeiden Wegefrage. Beispiel: 🎜rrreee🎜/ stellt hier den Stammpfad des Projekts dar, und auf diese Weise referenzierte Bilder werden von relativen Pfaden nicht beeinflusst. 🎜

Platzieren Sie die Bilddateien im öffentlichen Verzeichnis

🎜Wir können die Bilddateien auch im Verzeichnis /public ablegen. Die Dateien in diesem Verzeichnis werden nicht von Webpack gepackt, sondern Direkt in das gepackte Verzeichnis kopieren. Auf diese Weise können wir mithilfe relativer Pfade direkt auf diese Bilder verweisen. 🎜🎜Zusammenfassung🎜🎜Ob durch Ändern des Pfads oder Verwenden eines absoluten Pfads zum Referenzieren des Bilds, die Lösung ist relativ einfach. Um das Problem von Pfadfehlern zu reduzieren, können wir in der tatsächlichen Entwicklung während der Entwicklung gute Gewohnheiten entwickeln und versuchen, absolute Pfade zu verwenden oder Bilder in öffentlichen Verzeichnissen zu platzieren. Dies erleichtert nicht nur das Debuggen und die Wartung, sondern reduziert auch Pfadfehler nach dem Packen. Ich hoffe, dieser Artikel ist hilfreich für Sie. 🎜

Das obige ist der detaillierte Inhalt vonDer Bildpfad ist nach der vue-cli3-Paketierung falsch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!