在 Vue.js 中引用静态资源：如何避免 404 错误？

2024-03-13 06:08:46

在 Vue.js 中引用静态资源：全面指南

引言

在 Vue.js 应用中引用静态资源（如图像）对于提供用户界面和提升用户体验至关重要。然而，如果没有正确的配置和理解，开发人员可能会遇到恼人的 404 错误。本指南将深入探讨在 Vue.js 中引用静态资源的最佳实践，帮助您避免这些错误并创建出色的用户界面。

静态资源的位置

在 Vue.js 中，静态资源通常存储在以下位置之一：

public/assets： 此目录是 Vue CLI 项目的默认静态资源目录。
static： 此目录也可用于存储静态资源，尤其是在非 Vue CLI 项目中。

引用静态资源的 URL

根据静态资源的位置，您需要使用正确的 URL 来引用它们：

从 public/assets 目录：/assets/img.png
从 static 目录：/img.png

Vue CLI 3 项目配置

对于 Vue CLI 3 项目，需要在 vue.config.js 文件中配置静态资源别名。这告诉 Vue CLI 在哪里查找静态资源：

module.exports = {
  publicPath: '/my-app/',
  configureWebpack: {
    output: {
      publicPath: '/my-app/static/'
    }
  }
};

Vue CLI 4 项目

Vue CLI 4 项目自动配置静态资源别名为 /static/。

示例代码

以下是引用静态资源的示例代码：

// Vue CLI 3 项目
var icon = L.icon({
    iconUrl: '/assets/img.png',
    iconSize:     [25, 25],
    iconAnchor:   [12, 12]
});

// Vue CLI 4 项目
var icon = L.icon({
    iconUrl: '/static/img.png',
    iconSize:     [25, 25],
    iconAnchor:   [12, 12]
});