vue-public文件夹

文章目录

一、vue-public文件夹的认识

一、vue-public文件夹的认识

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。

注意我们推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：

脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。

public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀：

在 public/index.html或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过 <%= BASE_URL %> 设置链接前缀：
```
  <link rel="icon" href="<%= BASE_URL %>favicon.ico"><link rel="stylesheet" href="<%= BASE_URL %>css/style.css">
```

在js文件中使用process.env.BASE_URL作为pubulic文件的前缀

<template><div id="app">// 直接引入静态目录中的文件<img alt="Vue logo" :src="`${publicPath}imgs/01.jpg`">// 相对路径的引入会导致webpack对该文件进行打包<img alt="Vue logo" src="../public/imgs/01.jpg"></div>
</template><script>export default {name: 'App',data() {return {// 获取公共目录路径publicPath: process.env.BASE_URL}}
}
</script>

publicPath配置是在项目的根目录下vue.config.js中设置publicPath选项

module.exports = {publicPath: process.env.NODE_ENV === 'production'
? '/production-sub-path/' //真实开发的话,如果你的项目存放在公司域名二级路径下 只需要将 /production-sub-path/改为 /公司二级路径/就可以了: '/'
}

vue-public文件夹相关推荐

Vue如何访问Public文件夹
人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站 https://www.captainai.net/shuai 说明为什么需要访问Public文件夹的内容? 一般都是放在 ...
public文件夹访问
vue项目中的public文件夹任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack.你需要通过绝对路径来引用它们. 引用public资源在模板中,你首先需要向你的 ...
vue-cli3访问public文件夹静态资源的报错解决
今天在项目中使用了public文件夹里的静态资源,在本地测试没有发现问题,但是项目部署到fat服务器却报了404错误. 我发现原因在于我的项目没有部署在域名的根部,而我引用public文件是通过绝对路 ...
CDN模式引用js包的常见问题及解决方案引用public文件夹静态资源问题
出现原因: 项目中使用 Ant Design Charts(npm形式引用) 打包时,报错:- JavaScript heap out of memory (内存溢出) 网上的解决方案: 在打包的地方 ...
react 使用express实现简单的分页接口，以及服务端返回public文件夹里的图片方法
前言本文基于 react ("react": "^16.13.1") , express("express": "~4.16.1 ...
前端自存文件到public文件夹中，点击实现下载
webpack打包不会对public文件夹进行处理,直接把文件复制到存放项目的工程目录下步骤: 项目根目录下创建public文件夹,里面新建static文件夹,将要存的文件复制进去 ①以下为目录结构 ...
使用 public 文件夹
public 文件夹包含 HTML 文件,因此你可以对其进行调整,例如,设置页面标题.带有编译代码的如果将文件放入 public 文件夹,Webpack 将不会处理它.相反,它将被复制到构建文件 ...
vue读取文件夹下面的文件名称
借鉴文章点击查看原文详细文章这篇比较仔细 1.需求需要读取某个文件夹下面的所有文件名称,然后显示这些文件名称 2.在mounted中: mounted() {const files = requir ...
vue对文件夹进行拖拽上传完整流程（文件夹中超出100个文件）
前言上个文章介绍了多图片压缩,多图片可以通过直接多选图片进行拖拽,也可以通过直接拖拽文件夹进行解析得到多图片,接下来直接上代码先展示文件拖拽后对文件的解析效果图片文件夹图片文件夹解析大文件夹 ...
拖拽文件夹上传一（基于Vue的文件夹上传组件）
前言首先说一下,小弟第一次写文章,如果有什么错误还望小哥哥小姐姐多多包涵.如果有什么缺陷还望大家指出来让小弟多学习. 内容划分上传文件夹一共分两部分来写一方面怕太长了大家看五分钟就不想看 ...

vue-public文件夹

文章目录

一、vue-public文件夹的认识

vue-public文件夹相关推荐

最新文章

热门文章