南风知我意的技术博客

一、vue-public文件夹的认识

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

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

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

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

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

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

vue

<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文件夹的认识