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文件夹静态资源报错的解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue cli3.0打包上线静态资源找不到路径的解决操作

    项目中遇到打包之后静态资源路径找不到,报如下错误: 解决方法是: 在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下: module.exports = { publicPath: './' } 补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置 vue.config.js配置如下: const path = require

  • 如何配置vue.config.js 处理static文件夹下的静态文件

    最近开发过程中遇到个小需求,需要根据需求动态配置一些静态数据,但我不想直接把这个静态文件引入进来,build时就会把数据打包到js文件中,造成js文件很大:呃呃....(ps:就想给自己找点别扭) 回头看一下项目,果断的在根目录下创建一个static/test.json文件,在目标页面下fetch获取这个json文件里的数据: fetch("../static/test.json") .then(res => res.json()) .then(res => { //获取到

  • vue-cli脚手架打包静态资源请求出错的原因与解决

    问题 vue-cli默认配置打包后部署到特定路径下静态资源路径错误问题. 静态资源打包使用相对路径后css文件引入大图片路径错误问题 使用vue-cli2脚手架生成的默认打包配置文件,npm run build打包,部署项目到特定路径下://ip:port/test/index.html 此时访问//ip:port/test/index.html可以正常访问,但是引用的js和css等文件服务器响应为404,此时我们查看资源请求路径: http://ip:port/static/css/app.[

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

    今天在项目中使用了public文件夹里的静态资源,在本地测试没有发现问题,但是项目部署到fat服务器却报了404错误. 我发现原因在于我的项目没有部署在域名的根部,而我引用public文件是通过绝对路径方式引用的,因为就出现了路径错误. 路径如下: <img :src="`/image1.png`"> 在官网文档中发现这种情况需要为 URL 配置 publicPath 前缀:process.env.BASE_URL 正确的引用路径是: <img :src="

  • vue使用prop可以渲染但是打印台报错的解决方式

    vue属性传递时有时会报下述错误 vue.esm.js?f959:610 [Vue warn]: Error in render: "TypeError: Cannot read property 'RegistrationAuthority' of undefined" found in ---> <DialogHistory> at src/components/tools/dialog_history.vue <NurseInfor> at src/

  • vue中使用vant的Toast轻提示报错的解决

    目录 使用vant的Toast轻提示报错 提示信息弹出(toast) 实现过程如下 使用vant的Toast轻提示报错 记录一下今天使用vant中的Toast 轻提示,按照官方文档中的方法去使用发现报错使用不了. 文档中是这样写的 Toast.success('成功文案'); Toast.fail('失败文案'); main.js中引用vant后直接调用Toast报错. 实际使用是这样写 this.$toast.success("成功文案"); this.$toast.fail(&qu

  • vue项目总结之文件夹结构配置详解

    vue项目总结之文件夹结构配置详解

    前言 之前一段时间都在使用 vue 开发后台管理系统,在摸索的过程中对 vue 本身和模块化.规范化开发有了更深的认知,现在记录下来,希望对其他需要开发项目的人有帮助. 基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next.scss 等最新语言特性.下面随着小编来一起学习学习吧. 项目配置 首先,在确定好使用的框架和组件库后,先要大致了解它们,做到文档基本熟悉.本次开发使用到的有: vue , vuex , axios , elementUI .

  • vue打包静态资源后显示空白及static文件路径报错的解决

    今天使用vue打包(npm run build)遇到了几个坑,在这里分享给大家 打包之后打开dist的页面显示空白: 这个问题以前就处理过,是打包过程中出现错误频率较高的一种,可能有3处地方会出现这种情况 1.记得改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的. build: { index: path.resolve(__dirname, '../dist/ind

  • 基于Springboot2.3访问本地路径下静态资源的方法(解决报错：Not allowed to load local resource)

    最近在做的一个项目中有一个比较奇葩的需求: 要在springboot中,上传本地的图片进行展示 我的第一反应是,直接在数据库字段加一个存储本地路径的字段,然后用thymeleaf的th:src渲染到前端就好了嘛! 理想很丰满,但现实却很骨感~ 前端报了这样的错误Not allowed to load local resource 于是我想到了可以使用IO将图片先上传到static/images目录下,这样就不会出现禁止访问本地路径的问题了 但是这样实现,问题又来了:上传后的图片必须重启sprin

  • 如何正确解决VuePress本地访问出现资源报错404的问题

    背景 最近发现好多小伙伴刚用VuePress,然后一build完就直接用本地浏览器访问,结果出现黑块.仅仅出现那种问题还好,给项目安装 vuepress-plugin-serve 插件就行了, 但是如果有需求是需要离线查看 VuePress 生成后的文档呢?所以我特地研究了一下-- 解决办法 打开 .vuepress/config.js 文件,把 base 的值改成 ./,为了方便调试,最好这样写: //base: "/", base: "./", 写两个,一个用于

  • 基于Django静态资源部署404的解决方法

    一. 静态资源static文件放在app中 确认django.contrib.staticfiles包含在INSTALLED_APPS中. 在settings文件中定义STATIC_URL,例如: STATIC_URL = '/static/' 在模板中,可以硬编码URL如/static/my_app/example.jpg,或者最好使用static模板标签通过配置的STATICFILES_STORAGE存储来构建给定相对路径的URL(当你要切换到用于提供静态文件的内容分发网络(CDN)时,这样

  • Android 文件夹显示红色叹号的解决方法(必看)

    Android 文件夹显示红色叹号的解决方法(必看)

    有感叹号,说明有的文件损坏或丢失了 解决方法: 右击工程,Build Path..->Configure Build Path...->Java Build Path 可以看到引用的jar包,看看是不是带x了 不用的话就移除,要用的引用回正确路径就可以了 以上这篇Android 文件夹显示红色叹号的解决方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue打包部署到Nginx时,css样式不生效的解决方式

    今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题: Vue-cli项目在本地 使用 npm run dev的时候,页面样式是可以正常加载出来的,但是我将Vue-cli项目通过npm run build 打包生成的 dist 目录部署到Nginx之后,通过访问是无法加载出来样式的. 于是乎,在网上开始寻找资料,发现大部分前辈的解决方案都是在,config的文件夹中的index.js assetsRoot: path.resolve(__dirname, '../

随机推荐