vue@cli3项目模板怎么使用public目录下的静态文件

作为图片最好放在static目录下，但是vue@cli3没有static，网上都说放在public目录下，行，那就放吧，可问题是图片放了怎么使用

第一次尝试

肯定用绝对路径这就不说了，用相对路径，webpack会解析成base64，可是绝对路径怎么输都不对，咋回事

后面看网上说把前面路径下的public路径去掉，好，开发环境没问题了，可打包报错怎么办，就这个我研究了好久。

解决问题

网上一大堆牛头不对马嘴的，我也是无语了
最后的最后，终于官网找到了完美的解决方案

如此设置，完美解决问题，如果你留心观察过，你会发现，index.html文件的ico图标就已经这么使用了

 <template>
 <div class="er">
 <el-scrollbar style="height:100%">
  <div class="ds">
  <img
   class="sdde"
   :src='`${publicPath}imges/but_play.png`'
  >
  </div>
 </el-scrollbar>
 </div>
</template>

<script>
export default {
 data() {
 return {
  publicPath: process.env.BASE_URL
 }
 },
 components: {
 }

}
</script>

到此这篇关于vue@cli3项目模板怎么使用public目录下的静态文件的文章就介绍到这了,更多相关vue@cli3 public静态文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解vue-cli与webpack结合如何处理静态资源

    处理静态资源 你也许会注意到vue-cli与webpack结合的项目中,我们通常会有两个静态资源的路径:src/assets和static/,他们两者的区别是什么呢? 打包的资源 为了回答这个问题,我们首先要明白Webpack是如何处理静态资源的.在*.vue组件里,所有的templates和CSS模块都被vue-html-loader和css-loader解析来查找路径URL. 举个例子,在<img src"./logo.png">和背景background: url(.

  • 详解Vue-cli中的静态资源管理（src/assets和static/的区别）

    你可能注意到了我们的静态资源共有两个目录src/assets和static/,你们它们之间有怎样的区别呢? 资源打包 为了回答这个问题,我们需要了解webpack是如何处理静态资源的.在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查询资源的URLs解析. 比如说, 在 img src="./logo.png" 和background: url(./logo.png) 中./logo.png是一个相对资源路径,并

  • vue-cli与webpack处理静态资源的方法及webpack打包的坑

    通过Vue-cli进行webpack打包的坑 Vue-cli为Vue项目搭建的脚手架的确很方便,但打包时容易出现空白页,或者对应的静态资源加载不了. 我是通过将项目/config下的index.js的assetsPublicPath变成'./',变成相对路径,进行解决. cd vue demo npm run dev //运行程序 npm run bulid //webpack打包 处理静态资源 你也许会注意到vue-cli与webpack结合的项目中,我们通常会有两个静态资源的路径:src/a

  • 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-cli2.x项目优化之引入本地静态库文件的方法

    vue-cli2.x项目优化之引入本地静态库文件的方法

    demo地址:https://github.com/cag2050/vue_cli_optimize_static_resource vue-cli 将静态资源文件放到 static 文件夹下并引用: 1.将 node_modules 下相应的 xxx.min.js,复制到项目 static 文件夹下 2.index.html 修改 添加script引入 <script src="static/js/vue.min.js"></script> <scrip

  • vue@cli3项目模板怎么使用public目录下的静态文件

    作为图片最好放在static目录下,但是vue@cli3没有static,网上都说放在public目录下,行,那就放吧,可问题是图片放了怎么使用 第一次尝试 肯定用绝对路径这就不说了,用相对路径,webpack会解析成base64,可是绝对路径怎么输都不对,咋回事 后面看网上说把前面路径下的public路径去掉,好,开发环境没问题了,可打包报错怎么办,就这个我研究了好久. 解决问题 网上一大堆牛头不对马嘴的,我也是无语了 最后的最后,终于官网找到了完美的解决方案 如此设置,完美解决问题,如果你留

  • Vue.js项目模板搭建图文教程

    Vue.js项目模板搭建图文教程

    前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

  • vue引用public目录下文件的方式详解

    vue引用public目录下文件的方式详解

    有时候我们在开发h5时候,会有需要绑卡授权操作,这个时候需要同意某些协议并且这些协议是可以点击打开的,这种该怎么做呢?其实这就是一个链接,前端能够打开链接并且常用的也就是a标签喝vue自带的router-link,当然其他还有,通常来说a标签就够了 关于协议的存储,这里简单说下,在实际开发中,协议存储有以下几种: 1.存放在前端,一种是直接放在public静态资源文件夹下,webpack打包不会对其处理,直接把文件复制到存放项目的工程目录下:还有一种就是托管在cdn上,类似静态资源托管,会有一个

  • Vue+webpack项目配置便于维护的目录结构教程详解

    新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境:vue.webpack 目录结构: 项目子目录结构 子目录结构都差不多,主要目录是在src下面操作 src目录结构 src/common 目录 主要用来存放公共的文件 src/components 主要用来存放公共的组件 src/config 用来存放配置文件,文件目录如下 src/config/index.js 配置目录入口文件 import api from './website' // 当前平台 export const HOS

  • 解决springboot项目找不到resources目录下的资源问题

    springboot项目找不到resources目录下的资源 问题描述: 将老的mvc项目转为boot后找不到resources文件夹下的资源文件 原因: war包采用的是tomcat部署,tomcat会对war包进行解压,以及目录的一些操作.而springboot使用jar包部署,服务器中是不存在相关目录的. 环境: springboot 2.2.2RELAESE 主要的API: ClassPathResource classPathResource = new ClassPathResour

  • springBoot快速访问工程目录下的静态资源

    springBoot快速访问工程目录下的静态资源

    目录 1.牛刀小试 1.1 图片静态资源的访问 1.2 为静态资源添加访问前缀 1.3 WelCome Page 的奇妙跳转 2.那么,SpringBoot是如何做到的呢? 1.牛刀小试 1.1 图片静态资源的访问 先看官方怎么说,点击链接,打开SpringBoot官方文档 ​ 文档中明确指出:/static(or/publicor/resourcesor/META-INF/resources) ,这几个目录是SpringBoot放置静态资源的目录,只要把静态资源放到这几个目录下,就能直接访问到

  • Python读取指定目录下指定后缀文件并保存为docx

    最近有个奇葩要求 要项目中的N行代码 申请专利啥的 然后作为程序员当然不能复制粘贴 用代码解决.. 使用python-docx读写docx文件 环境使用python3.6.0 首先pip安装python-docx pip install python-docx 然后下面是脚本 修改目录,这里默认取脚本运行目录下的src文件夹 取.cs后缀的所有文件 读取并保存为docx 有一点需要注意,如果文件中有中文,请用vscode或者其他编辑器使用utf-8格式打开,看看有没有乱码 其中每处理一个文件都会

  • java删除指定目录下所有空文件夹的方法

    本文实例讲述了java删除指定目录下所有空文件夹的方法.分享给大家供大家参考,具体如下: package com.func; import java.io.File; import java.util.ArrayList; import java.util.List; /** * 删除指定目录下的所有空文件夹 * * @author zdw * */ public class FileUtils { List<File> list = new ArrayList<File>();

  • java删除指定目录下指定格式文件的方法

    本文实例为大家分享了java删除指定目录下指定格式文件的具体代码,供大家参考,具体内容如下 正在看疯狂java讲义这本书,发现源码中有我不需要的class文件,想批量把它删除 代码如下: import java.io.File; public class Main { static int count = 0; public static void main(String[] args) { //路径 String path="/media/lcy/Data/Workspaces/java/cr

  • java将一个目录下的所有文件复制n次

    java将一个目录下的所有文件复制n次

    本文实例为大家分享了java将一个目录下的所有文件复制n次的具体代码,供大家参考,具体内容如下 1. 文件复制示意图 2.java程序 (1).调用 final static String SOURCESTRING = "/Users/amarao/360/download/test/"; final static String OUTPUTSTRING = "/Users/amarao/360/download/test4/"; public static voi

随机推荐