一句話總結(jié)：第三方資源都放在static文件夾中（如腳本庫），自己在項目中使用的一些資源都放在assets中

文檔傳送門：

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

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

PS: 理論看上面的文檔性湿，這里就不復(fù)制粘貼了

總結(jié)：

區(qū)別1：

? 通過assets引入的資源會被webpack打包（并且默認(rèn)如果圖片大小小于100000byte瓢谢，會轉(zhuǎn)為base64）

? 參考： url-loader: https://github.com/webpack-contrib/url-loader

? 通過static引入的資源會原封不動地在dist輸出

區(qū)別2：

? 引用方式的不同，具體的引用方式如下：

用代碼舉個栗子：(用各種方式引圖片）

文件目錄：

+-- src

|   +-- assets

|       +-- logo.png

|       +-- big_image.png

|   +-- HelloWorld.vue

+-- static

|   +-- images

|       +-- logo.png

代碼：

HelloWorld.vue

<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輸出如下：

image

(base64太長兔辅，就用圖的形式貼出來了)

頁面顯示如下：

image

分析：

• 分析 logo1, logo2, logo3, logo4 發(fā)現(xiàn)asssets只能通過require或者import引入腊敲，使用字符串變量的方式行不通

• 使用如下這種方式可以不用require

  src中直接使用相對路徑字符串，而不是將相對路徑賦值給變量后再賦給src

  對比logo4 和 第六個logo维苔，唯一的區(qū)別是后者沒有使用變量

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

  或者

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

  PS: 必須在配置文件 webpack.base.conf.js 中設(shè)置別名

  resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
        'assets': resolve('src/assets') // 這行劃重點(diǎn)
      }
    },
  

• 分析logo1和big_image（大于10K）的控制臺輸出碰辅，logo1被轉(zhuǎn)為base64，而big_image在構(gòu)建的時候被"內(nèi)聯(lián)/復(fù)制/重命名"了介时。

• 錯誤的引用方式没宾，

  上面第四種

  <img width="80px;" :src="logo4"> // logo4 為字符串變量
  

  上面第七種

  <img width="80px;" src="assets/logo.png"> // src同樣為字符串，并且沒有符號 ~ 的加持沸柔，路徑不對