美文网首页
Vue中assets和static的区别

Vue中assets和static的区别

作者: 简单tao的简单 | 来源:发表于2024-01-23 08:17 被阅读0次

相同点:

文件夹中的资源在html中使用都是可以的。

不同点

1. wabpack编译
  • static 目录下的文件是不会被wabpack处理的,它们会被直接复制到最终的打包目录下面(默认是 dist/static ),且必须使用绝对路径(/static/[filename])来引用这些文件。
  • assets 中的文件会经过 webpack 打包,重新编译
2. 自己的还是第三方的资源
  • static中建议放一些外部第三方的,例如 iconfoont.css,因为这些引入的第三方文件已经经过处理,我们不再需要打包压缩格式化等流程,直接上传。
  • assets存放自己的文件
3. 引入方式
  • static 使用绝对路径/static/[filename]来引用文件。
  • assets 使用 require 或者 import 的方式引用
<div class="myDemo">
    //  动态显示文件内容
    <h5>动态路径</h5>
    <img :src="asetUrl" title="assets中的图片">
    <img :src="sticUrl" title="static中的图片">
</div>
 
<script>
export default {
    name: 'myDemo',
    data (){
      return {
        asetUrl: require('../assets/logo.png'),
        sticUrl: '/static/logo.png'
    }
}
</script>

相关文章

网友评论

      本文标题:Vue中assets和static的区别

      本文链接:https://www.haomeiwen.com/subject/bkpyodtx.html