相同点:
文件夹中的资源在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>
网友评论