当我们使用 Vue.js 开发单页应用（SPA）时，常常会遇到打包后静态资源文件（如图片、样式表等）的 404 问题。这是因为在开发模式下，我们可以使用相对路径去引用各种资源。但在生产模式下，打包后的文件会放置于服务器上的根目录下，而相对路径会错误地指向服务器根目录下的相关路径。本文将介绍几种解决方案来解决这个问题。
解决方案一：使用绝对路径
我们可以使用绝对路径来引用各种资源。通过在 Vue.js 的配置文件 vue.config.js 中设置 publicPath 选项，我们可以指定打包后的资源路径。如果你的应用是部署在服务器子目录中，你需要指定应用部署的子目录路径。
// vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/your-project-name/'
: '/'
}在你的 HTML 文件中，你可以这样使用绝对路径来引用打包后的资源：
<!-- 引用静态资源 --> <img src="<%= BASE_URL %>your-image.png">
或者，在 Vue 的组件中：
<template>
<div>
<img :src="require('@/assets/your-image.png')" />
</div>
</template>解决方案二：使用 Webpack 插件
Vue.js 构建工具提供了 Webpack 插件来帮助我们解决这个问题。vue-loader 和 url-loader 提供了自动解析和配置的能力，同时为我们处理 URL 路径。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------------------------------
------- -------------
-------- -
------ ------
----- ---------------------------
-
-
-
-
-解决方案三：使用 CDN
另一种常见的解决方法是将静态资源放在 CDN 上。这种方法可以有效地减轻服务器的负担，并提供更快的页面加载时间。同时，CDN 可以提供更好的高并发处理能力，提高用户体验。
<img src="http://cdn.example.com/your-image.png" />
结论
在开发中，我们需要重视这个问题，因为避免 404 错误可以提高我们的用户体验，保护我们的网站免受攻击。在生产模式下，使用绝对路径来引用资源，使用 Webpack 插件，或者使用 CDN 都可以解决这个问题。使用上述方法可以使你的应用保持健康，提高网站速度并为用户提供更好的体验。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fcdc0b447136260173ec41