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同樣為字符串，并且沒有符號 ~ 的加持，路徑不對

總結

以上是生活随笔為你收集整理的vue 项目引用static目录资源_vuejs-templates静态资源目录src/assets、和static/区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。