vue 项目中assets 和static的区别

一、Webpacked Assets

为了回答这个问题,我们首先需要了解Webpack如何处理静态资产。在 *.vue 组件中,所有模板和CSS都会被 vue-html-loader 及 css-loader 解析,并查找资源URL。例如,在 <img src="./logo.png">和 background: url(./logo.png) 中,"./logo.png" 是相对的资源路径,将由Webpack解析为模块依赖。

因为 logo.png 不是 JavaScript,当被视为模块依赖时,需要使用 url-loader 和 file-loader处理它。vue-cli 的 webpack 脚手架已经配置了这些 loader,因此可以使用相对/模块路径。

由于这些资源可能在构建过程中被内联/复制/重命名,所以它们基本上是源代码的一部分。这就是为什么建议将Webpack 处理的静态资源放在 /src 目录中和其它源文件放一起的原因。事实上,甚至不必把它们全部放在 /src/assets:可以用模块/组件的组织方式来使用它们。例如,可以在每个放置组件的目录中存放静态资源。

资源处理规则

    • 相对URL(./assets/logo.png):将会被解释成一个模块依赖。它们会被一个基于你的Webpack输出配置自动生成的URL替代。
    • 没有前缀的URL(assets/logo.png):将会被看成相对URL,并且转换成./assets/logo.png。
    • 前缀带~的URL(~assets/logo.png):会被当成模块请求, 类似于require(‘some-module/image.png‘). 如果你想要利用Webpack的模块处理配置,就可以使用这个前缀。例如,如果你有一个对于assets的路径解析,你需要使用 <img src="~assets/logo.png"> 来确保解析是对应上的。
    • 相对根目录的URL(/assets/logo.png):不会被处理。

在JavaScript里获取资源路径

为了能让Webpack返回正确的资源路径,你需要使用require(‘./relative/path/to/file.jpg‘),由file-loader进行解析,然后返回处理过的URL。例如:

computed: {
  background () {
    return require(‘./bgs/‘ + this.id + ‘.jpg‘)
  }
}

注意上例将会包含每个在最后一次build中的./bgs/ 下的图片。 这是由于 Webpack 无法推测它们哪个会在运行时被使用, 因此会包含所有图片.

二、"Real" Static Assets

相比之下,static/ 目录下的文件并不会被 Webpack 处理:它们会直接被复制到最终目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。

任何放在 static/ 中文件需要以绝对路径的形式引用:/static/[filename]。如果更改 assetSubDirectory 的值为 assets,那么路径需改为 /assets/[filename]

// config/index.js
module.exports = {
  // ...
  build: {
    assetsPublicPath: ‘/‘,
    assetsSubDirectory: ‘static‘
  }
}

三、使用区别

<template>
   <img :src="filterIcon(item.pollingState)" alt="" class="pollingIcon">
</template>
<script>
    export default {
        methods: {
            filterIcon(val) {
                let commonUrl = ‘../../../../static/images/assetpolling/‘;
                if (val === 1) {
                  return commonUrl + ‘pollingSuccess.png‘;
                } else {
                  return commonUrl + ‘pollingLoading.gif‘;
                }
              }
        }
    }
</script>

如果src的值是一个变量,放在staic下能访问到图片,放在assets下访问不到。如果是一个字符串常量,staticassets下都可以访问到。

分析:官方说,在 *.vue组件中,所有模板和CSS都会被 vue-html-loader 及 css-loader 解析,并查找资源URL。所以对应的资源如果是个字符串常量,在编译期就已经被解析为Base64与代码融合为一体。而如果src对应的是个变量,只有在运行期才会被解析,这时候就访问不到assets目录下的资源了。

结论:当资源对应的是变量时,资源放在static下。第三方的类库的资源也放在static下。

参考译文:https://blog.csdn.net/riddle1981/article/details/78469032?utm_source=blogxgwz4

官网原文:http://vuejs-templates.github.io/webpack/static.html

原文地址:https://www.cnblogs.com/vickylinj/p/12063618.html

时间: 2024-10-30 01:25:53

vue 项目中assets 和static的区别的相关文章

vue中assets和static的区别

Vue中assets和static的区别 再一次框架定型中,与同事在静态资源的存放上有了一些分歧,后来经过查阅总结如下: 相同点: assets和static两个都是存放静态资源文件.项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下,这是相同点 不相同点: assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化.而压缩后的静态资源文件最终也都会放置在s

vue项目中使用阿里iconfont图标

在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标库,先看一下官网 可以看到有将近两百万的图标量,可以说我们想要的矢量图图标这里大部分都是有的,下面直接开始如何在vue项目中使用,方法有两种 方法一:简单粗暴法 1.打开 iconFont官网 选择自己喜欢的图标,并且添加购物车 例如我现在选择三个图标 点击购物车,添加至项目 为了方便可以给项目起一个名字 选

在vue项目中的axios使用配置记录

默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from 'axios' import qs from 'qs' import { Message, Loading } from 'element-ui' // 响应时间 axios.defaults.timeout = 5 * 1000 // 配置cookie // axios.defaults.withC

vue 项目中使用阿里巴巴矢量图标库iconfont

原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图标库) image.png 3.把需要的图标添加到购物车 image.png 4.打开购物车并选择添加至项目,然后确定 image.png 5.这时候可以在项目中看到你选中的svg图标,这时候可以点击下载至本地 image.png 6.打开下载的zip包就可以看到里面的文件,将下面几个文件取出 im

新手如何在Vue项目中优雅的使用UEditor(百度富文本编辑器)

1.去官网,下载ueditor,解压,重命名,放在vue项目中的static文件夹下. ps:新手会觉得在官网上有几种不同版本的文件,俺到底要下载哪一个,如果你仅仅是一个前端,那么好,只要是最新版本的UEditor,随便下,如果你比较负责,问问你后端同事用什么语言写后端的,那就用什么版本的,其实不同语言的功能都一样,只是为了方便给后面图片上传的配置提供方便. 官网链接:http://ueditor.baidu.com/website/download.html UEditor目录如下所示: 2.

Vue 项目中使用 jsPlumb

jsPlumb 介绍 jsPlumb 是一个强大的 JavaScript 连线库,它可以将 html中 的元素用箭头.曲线.直线等连接起来,适用于开发 Web 上的图表.建模工具.流程图.关系图等. jsPlumb 参考网站 博客园:http://www.cnblogs.com/leomYili/p/6346526.html?utm_source=itdadao&utm_medium=referral 官网:https://www.jsplumbtoolkit.com/ 安装 jsPlumb v

如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html  原文网址 如何在Vue项目中使用vw实现移动端适配 作者:大漠 日期:2018-01-25 点击:10362 vw Layout 布局 Vue mobile 编辑推荐:使用 Coding.net 搭建静态博客,自定义域名,全站 HTTPS 加密,自动实时部署, 立即托管您的网站! 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页

在vue项目中 如何定义全局变量 全局函数

如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可. 全局变量模块文件: Global.vue文件: <script> const serverSr

前端框架Vue.js——vue-i18n ,vue项目中如何实现国际化

每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.前言 趁着10月的最后一天,来写一篇关于前端国际化的实践型博客.国际化应该都不陌生,就是一个网站.应用可以实现语言的切换. 在这就不谈原理,只说说如何实现中英文的切换.做技术的总得先把 demo 做出来嘛. 二.demo 场景需求分析 需求很简单,左上角 ''网易云音乐''就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本. 切换成英文版本: 三.实现国际化