vuejs-templates静态资源目录src/assets、和static/区别

src/assets/和static/区别和用法

一句话总结:第三方资源都放在static文件夹中(如脚本库),自己在项目中使用的一些资源都放在assets中

文档传送门:

vuejs-templates官方英文文档:http://vuejs-templates.github.io/webpack/static.html

上面文档的中文翻译:https://athena0304.gitbooks.io/vue-template-webpack-cn/content/static.html

PS: 理论看上面的文档,这里就不复制粘贴了

总结:

区别1:

​ 通过assets引入的资源会被webpack打包(并且默认如果图片大小小于100000byte,会转为base64)

​ 参考: url-loader: https://github.com/webpack-contrib/url-loader

​ 通过static引入的资源会原封不动地在dist输出

区别2:

​ 引用方式的不同,具体的引用方式如下:

用代码举个栗子:(用各种方式引图片)

文件目录:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
+-- src

| +-- assets

| +-- logo.png

| +-- big_image.png

| +-- HelloWorld.vue

+-- static

| +-- images

| +-- logo.png

代码:

1
HelloWorld.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
<div>
<img width="80px;" :src="logo1">
<img width="80px;" :src="logo2">
<img width="80px;" :src="logo3">
<img width="80px;" :src="logo4">
<img width="80px;" :src="logo5">
<img width="80px;" src="../assets/logo.png">
<img width="80px;" src="assets/logo.png">
<img width="80px;" src="~assets/logo.png">
<img width="80px;" src="/static/images/logo.png">
<img width="80px;" :src="big_image">
</div>
</template>

<script>
import logo3 from 'assets/logo.png'
export default {
name: 'HelloWorld',
data () {
return {
logo1: require('assets/logo.png'),
logo2: require('../assets/logo.png'),
logo3: logo3,
logo4: '../assets/logo.png',
logo5: '/static/images/logo.png',
big_image: require('assets/big_image.png')
}
},
created () {
console.log('logo1: ', this.logo1)
console.log('logo2: ', this.logo2)
console.log('logo3: ', this.logo3)
console.log('logo4: ', this.logo4)
console.log('logo5: ', this.logo5)
console.log('big_image: ', this.big_image)
}
}
</script>

log输出如下:

(base64太长,就用图的形式贴出来了)

页面显示如下:

分析:

  • 分析 logo1, logo2, logo3, logo4 发现asssets只能通过require或者import引入,赋值字符串的方式行不通

  • 使用如下这种方式可以不用require

    src中直接使用相对路径字符串,而不是将相对路径赋值给变量后再赋给src

    对比logo4 和 第六个logo,唯一的区别是后者没有使用变量

    1
    <img width="80px;" src="../assets/logo.png">

    或者

    1
    <img width="80px;" src="~assets/logo.png"> // 有符号 ~ 的加持

    PS: 必须在配置文件 webpack.base.conf.js 中设置别名

    1
    2
    3
    4
    5
    6
    7
    8
    resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    'assets': resolve('src/assets') // 这行划重点
    }
    },
  • 分析logo1和big_image(大于10K)的控制台输出,logo1被转为base64,而big_image在构建的时候被”内联/复制/重命名”了。

  • 错误的引用方式,

    上面第四种

    1
    <img width="80px;" :src="logo4"> // logo4 为字符串变量

    上面第七种

    1
    <img width="80px;" src="assets/logo.png"> // src同样为字符串,并且没有符号 ~ 的加持,路径不对
0%