vue-cli3靜態資源static assets項目結構

今天又是糾結的一天...
本文又名:vue/cli3中不得不知的webpack配置..
如你們所見，我在前文也寫過

vue-cli3.0默認項目目錄與 2.0的相比，更精簡:
1.移除的配置文件根目錄下的， build和 config等目錄，
2.移除了 static文件夾，新增了 public文件夾，而且 index.html移動到 public中。
3.在 src文件夾中新增了 views文件夾，用於分類 試圖組件 和 公共組件 。
4.大部分配置 都集成到 vue.config.js這裏,在項目根目錄下

那咱們到底怎麼搞這個靜態資源呢??

這裏插個話：
我發現webpack官方文檔是有導航欄的

粗心的一直沒看到...
還在想爲何網址同樣內容不同

真的只有我一我的如今才發現有這個導航欄麼??????
告訴我我不是一我的好很差???

迴歸正題:
我如今發現原來不少個人疑問均可以用這個文檔解決...
你們在版本更新後不懂就多看看這個吧！！！
不知道有沒有中文翻譯的...沒錯全部的只要看這個就夠了

Vue/cli3官方文檔

今天學習了一下靜態資源相關的

總結就是看這篇就夠了（是上篇的分支哦微笑）

Static Assets Handling官方文檔Vue/cli3

這樣寫感受很廢話..可是其實說多了你看，能夠寫下面連接這麼多文章，
雖然版本不一樣，可是有些思路相似...要不要翻譯看我心情了...
翻譯一下：

1.相對路徑引入

使用相對路徑引入的靜態資源文件，會被webpack處理解析爲模塊依賴。例如，在 <img src="./logo.png">和 background: url(./logo.png)，以及CSS@import,"./logo.png" 是相對的資源路徑。在vue2.x版本相似assets文件夾。

舉例 url(./image.png) 會被轉換成 require('./image.png')
而<img src="../image.png">
會被編譯成
createElement('img', { attrs: { src: require('../image.png') }})

URL轉換規則

URL是絕對路徑，如/images/foo.png,會被保留不變。
URL以.開始，會被認爲是相對模塊請求，根據文檔結構（folder structure）轉換。
URL以~開始，會被認爲是模塊請求,意味着能夠在node modules裏引用資源：
<img src="~/some-npm-package/foo.png">
URL以@開始，會被認爲是模塊請求，這頗有用由於，Vue CLI對默認別名@是<projectRoot>/src

2.public文件夾

public文件夾下的文件並不會被Webpack處理：它們會直接被複制到最終的打包目錄（文件名需指定）下。必須使用絕對路徑引用這些文件，簡單說就是用來存放萬年不變的文件。
在vue2.x版本相似static/ 文件夾。

有一些細節，懶得翻譯 仍是看官方文檔吧

俗話說的好，叫你看官方文檔！叫你看官方文檔！叫你看官方文檔！
但是官方文檔也很難讀阿。好比我很急阿，都不知道我要看的東西在哪阿。

有點懶得翻譯 相關能夠參考以下連接
vue2.x版本相關參考文章
vue2.x版本相關參考文章2
vue2.x版本相關參考文章3
vue2.x版本相關參考文章4

項目結構

main.js 是咱們的入口文件，主要做用是初始化vue實例並使用須要的插件。

App.vue是咱們的主組件，全部頁面都是在App.vue下進行切換的。其實你也能夠理解爲全部的路由也是App.vue的子組件。因此我將router標示爲App.vue的子組件。

我糾結了好久爲何App.vue沒有import hello from './components/HelloWorld'
原來是在home.vue import了

對了Vue.use(Router)也是寫在router.js裏的