vue-cli3 패키징 후 이미지 경로가 잘못되었습니다.

프론트엔드 기술의 지속적인 발전과 함께 다양한 프레임워크와 툴도 등장하고 있는 이 시대에 Vue.js는 의심할 여지 없이 무시할 수 없는 존재입니다. 그러나 Vue.js가 점점 대중화되면서 몇 가지 문제에 직면하게 됩니다. 이 기사에서는 vue-cli3을 사용하여 프로젝트를 패키징할 때 잘못된 이미지 경로 문제를 소개하고 몇 가지 해결 방법을 제공합니다.

문제 설명

프로젝트 개발을 위해 vue-cli3를 사용할 때 일반적으로 img 태그를 사용하여 이미지를 소개할 수 있습니다. 예: 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

여기에서는 logo.png 이미지가 프로젝트의 assets 디렉터리에 있다고 가정합니다. npm run Serve 명령을 실행하면 이미지가 올바르게 표시됩니다. 그런데 패키징을 위해 npm run build 명령을 실행하면 패키징된 페이지에 접속해 보니 이미지가 정상적으로 표시되지 않는 것을 브라우저의 개발자 도구를 통해 확인할 수 있습니다. 그리고 콘솔에는 다음과 같은 오류 메시지가 표시되었습니다.

rrreee

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.jspublicPath 필드 값을 수정하여 루트 경로를 바꿀 수 있습니다. /code> , 이를 통해 잘못된 경로 문제를 해결합니다. 🎜🎜먼저 프로젝트 루트 디렉터리에 새 vue.config.js 파일을 만들고 다음 코드를 입력하세요. 🎜rrreee🎜여기서 publicPath는 실제로 패키지된 정적 리소스를 설정합니다. 저장 경로. 위 코드는 정적 리소스와 index.html이 동일한 디렉터리에 저장되어 있음을 나타냅니다. 🎜

이미지 참조에 절대 경로 사용

🎜 publicPath를 수정하여 문제를 해결하는 것 외에도 이미지 참조에 절대 경로를 직접 사용할 수도 있으므로 상대 경로로 인해 발생하는 문제를 피할 수 있습니다. 경로 질문입니다. 예: 🎜rrreee🎜/는 여기서 프로젝트 루트 경로를 나타내며 이러한 방식으로 참조된 이미지는 상대 경로의 영향을 받지 않습니다. 🎜

이미지 파일을 public 디렉토리에 배치

🎜이미지 파일을 /public 디렉토리에 배치할 수도 있지만, 이 디렉토리의 파일은 webpack에서 패키징되지 않습니다. 패키지된 디렉터리에 직접 복사합니다. 이러한 방식으로 상대 경로를 사용하여 이러한 이미지를 직접 참조할 수 있습니다. 🎜🎜요약🎜🎜경로를 수정하든, 절대 경로를 사용하여 이미지를 참조하든, 해결 방법은 비교적 간단합니다. 실제 개발에서는 경로 오류 문제를 줄이기 위해 개발 중에 좋은 습관을 기르고 절대 경로를 사용하거나 공용 디렉터리에 이미지를 배치하려고 노력할 수 있습니다. 이는 디버깅과 유지 관리를 용이하게 할 뿐만 아니라 패키징 후 경로 오류도 줄여줍니다. 이 기사가 도움이 되기를 바랍니다. 🎜

위 내용은 vue-cli3 패키징 후 이미지 경로가 잘못되었습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!