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

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

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

明月松江   2021-03-15 我要评论
想了解vue-cli3访问public文件夹静态资源报错的解决方式的相关内容吗,明月松江在本文为您仔细讲解vue-cli3 public静态资源出错的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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文件夹静态资源报错的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

猜您喜欢

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们