前端学习 vue中public与assets的区别

最新推荐文章于 2026-02-21 14:09:01 发布

原创最新推荐文章于 2026-02-21 14:09:01 发布 · 5.7k 阅读

33 ·

本内容遵循CC 4.0 BY-SA版权协议

本文详细解析了在前端项目中public和assets两个文件夹的使用差异，包括资源处理方式、路径引用规则及如何在HTML和JS中正确引用资源。通过实例展示了不同场景下两者的优劣，为开发者提供了实用的代码示例。

一.public和assets文件的异同

1.相同点
文件夹中的资源在html中使用都是可以的。

2.不同点
使用assets下面的资源，在js中使用的话，路径要经过webpack中的file-loader编译，路径不能直接写。
使用public文件下面的资源，是不会被webpack处理的，它们会被直接复制到最终的打包目录下面，且必须使用绝对路径来引用这些文件。

1.public中的文件，是不会经过编译的，打包后会生成dist文件夹，public中的文件只是复制一遍。因此，public建议放一些外部第三方，自己的文件放在assets，别人的放public中。
2.若把图片放在assets和public中，html页面都可以使用，但是在动态绑定中，assets路径的图片会加载失败（因为webpack使用的是commenJS规范，必须使用require才可以。


//   HTML  结构

<div class="myDemo">
    //   直接显示文件内容
    <h5>直接路径</h5>
    
    <img src="../assets/logo.png" title="assets中的图片">
    <img src="/static/logo.png" title="static中的图片">
    
    //   动态显示文件内容
    <h5>动态路径</h5>
    
    <img :src="asetUrl" title="assets中的图片">
    <img :src="sticUrl" title="static中的图片">
    
</div>

//   JS  

export default {
    name: 'myDemo',
    data (){
      return {
        asetUrl: require('../assets/logo.png'),
        sticUrl: '/static/logo.png'
    }
}

或者使用 import

<img :src="checkLogin" alt="">

<script>
// import 引入方式 assets 文件夹
import aa from "../assets/切图2/pic1.png";
export default {
  name: "twologin",
  data() {
    return {
      loginBoxShow: true
    };
  },
  computed: {
    checkLogin() {
      if (this.loginBoxShow === true) {
        return aa;
      } else {
      // public 文件夹使用绝对路径
        return "/img/切图2/pic2.png";
      }
    }
  }
};
</script>