vue 项目引用static目录资源-凯发k8官方网
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
代码：
1helloworld.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
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)
}
}
log输出如下：
(base64太长，就用图的形式贴出来了)
页面显示如下：
分析：
分析 logo1, logo2, logo3, logo4 发现asssets只能通过require或者import引入，赋值字符串的方式行不通
使用如下这种方式可以不用require
src中直接使用相对路径字符串，而不是将相对路径赋值给变量后再赋给src
对比logo4 和 第六个logo，唯一的区别是后者没有使用变量
1
或者
1 // 有符号 ~ 的加持
ps: 必须在配置文件 webpack.base.conf.js 中设置别名
1
2
3
4
5
6
7
8resolve: {
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 // logo4 为字符串变量
上面第七种
1 // src同样为字符串，并且没有符号 ~ 的加持，路径不对
总结
以上是凯发k8官方网为你收集整理的vue 项目引用static目录资源_vuejs-templates静态资源目录src/assets、和static/区别的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：