vue-cli3访问public文件夹静态资源报错的解决方式

171 阅读 0 评论 113 点赞

我是靠谱客的博主香蕉糖豆，最近开发中收集的这篇文章主要介绍vue-cli3访问public文件夹静态资源报错的解决方式，觉得挺不错的，现在分享给大家，希望可以做个参考。

今天在项目中使用了public文件夹里的静态资源，在本地测试没有发现问题，但是项目部署到fat服务器却报了404错误。

我发现原因在于我的项目没有部署在域名的根部，而我引用public文件是通过绝对路径方式引用的，因为就出现了路径错误。

路径如下：

<img :src="`/image1.png`">

在官网文档中发现这种情况需要为 URL 配置 publicPath 前缀：process.env.BASE_URL

正确的引用路径是：

<img :src="`${process.env.BASE_URL}image1.png`">

当然，最好避免将文件放在public文件夹，因为任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。

补充知识：@vue/cli 3 打包文件读取绝对路径处理

@vue/cli 3 封装了 webpack.config.js，一般都在 vue.config.js 里面配置，官网不推荐在 webpack 的 output 处理，这里踩了一下坑，希望可以帮到后面遇到的小伙伴。

vue.config.js

module.exports = {
 // 这里是配置上线读取当前目录，默认是根路径，如 /js, /css 等，具体根据项目来
 baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
 // others
}

以上这篇vue-cli3访问public文件夹静态资源报错的解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持靠谱客。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。