vue引入assets和static靜態資源問題

一、assets文件夾與static文件夾的區別

　　assets文件是src下的，因此最後運行時須要進行打包，通常用來存放本身用到的靜態資源；

　　static文件不須要打包就直接放在最終的文件中了，通常用來存放第三方靜態資源。

引入靜態資源方法：js中用import，css中用@import url(...) ,index.html中用link(script)標籤引入。

利用vue-cli腳手架搭建的webpack對各類文件的編譯通常是配置好的。

二、遇到的問題

　　第一次使用vue構建工具作項目，業餘時間邊學邊作，好不容易大概懂了一點webpack配置，以及簡單的vue路由、狀態管理，開心的開始了個人單頁面應用。在作了幾個頁面後，想放到服務器看看，因而進行了build，卻被突如其來的報錯搞懵逼了，在開發環境下，一切正常。error以下：

　　

　　首先肯定是靜態資源的問題，因而開始百度，結果搜到一大堆說是路徑問題，其實和路徑根本不要緊，出現路徑問題的要麼是本身真的寫錯了，還有就是build成功了可是打開是空白頁，這個命令行好像都提示說若是不在服務器環境根目錄下是行不通的，因此這。。。我竟然看了大半天牛頭不對馬嘴的問題；還有說是編譯出了問題，什麼css-loader、style-loader沒配置好啊，或者沒安裝什麼的，都怪我不懂webpack，其實init的配置這些都是配置好的，以下圖

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

　　而後偶然看到一個svg，發現webpack.base.conf.js下有這麼一段和svg有關的，覺得是圖片打包出錯了：

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }

　　又要怪本身毫無構建工具的基礎了，查看了網上衆多的不一樣版本，不一樣語法，就一一嘗試了一下，然並卵。好在最後開竅了(暗暗吐槽一句什麼垃圾百度)，因而打開谷歌翻譯將error翻譯成中文，透過現象看本質（這裏又要感嘆一句英語到用時方恨少，有空得去補補英文），裏面最關鍵的意思就是「解析SVG時出錯：未加引號的屬性值」，經過這句話終於找到緣由，我引入的mui.css中對於SVG是用單引號包裹的，而webpack編譯時SVG要求必須是雙引號包裹！你們都知道前端對引號是沒有強制要求的。

　　----------看似尋常最奇崛 成如容易卻艱辛---------es6嚴格模式以及構建工具都開始對js做出規範化要求，將來要踩的坑還不少，加油！