小記 vue 打包(build)須要注意的一些事

記錄 vue 項目打包的一些事情

首先聲明項目都是由 vue-cli 生成;

vue 項目從 dev 切換到 prod 時有不少地方須要注意;

1. 首先是你們最須要注意的 ajax 切換環節
   之前一開始用 Vue 的時候我是在 build 以後,手動修改 ajax 的請求前綴
   好比如今我使用的 axios,
   js axios.defaults.baseURL = 'api'
   可是打包的時候通常都要改動 url,直到我後來知道了 process.env 這個對象,
   使用他能夠獲取當前的環境(後續還會提到,如何修改這個對象)
   以後就能夠輕鬆的修改 ajax 的基礎路徑了:
   js axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'api' : ''
   使用該方法可以無需在打包時修改路徑,更好地配合 webpack 的 proxyTable;

2. 與 1 相似的 Vue.config.devtools 一樣地使用 process 來解決這個問題,

   Vue.config.devtools = process.env.NODE_ENV === 'development'

   該屬性是是否可以打開 vue 的 devTools;

   某個小有名氣的網站,vue 上線的時候,仍是 dev 環境,你們引覺得戒吧
   

3. sources裏的 webpack://

   你們在運行程序的時候能夠打開 chrome 的 sources 點擊 webpack:// 能夠發現這個對象裏,有全部在運行的組件,資源的源碼;
   這個是爲了在 debug 的時候調試,然而在 build 以後這個仍然會存在與 sources 中留下很大的隱患;

   而解決這個的方法就是在 /config/index.js 文件下 build 對象中的productionSourceMap改成:
   js productionSourceMap:false
   在 build 以前須要檢查一下該屬性;

4. build 以後須要相對路徑的引用:

   也許你們都知道了,在通常項目 build 以後都會生成一個 index.htm 文件和 一個 static 文件夾,而 static 這個文件夾須要被放置在根目錄下,
   index.html 會在決定路徑下引用該文件
   若是須要添加模塊的話,只須要在 /config/index.js 文件下的 build 對象下,修改 assetsSubDirectory 屬性爲:
   js assetsSubDirectory: 'static/[模塊名]'
   不少人引用圖片, css 時也都是在 static 文件夾裏面引用的,因此絕對引用也沒有太多的問題;
   回到正題,若是圖片,css 都是在 assets文件裏面, build 以後的文件須要相對路徑的引用,這個狀況也是比較多的:
   assetsSubDirectory這個屬性能夠像我上面說的那樣,再修改 assetsPublicPath 爲 './'

   若是還有終極的引用需求,好比我碰到的這個:
   index.html 放置在根目錄的模塊文件夾下, static 須要放置在根目錄的公共static下的模塊文件夾下,
   這裏須要改的話會比較麻煩,不過我估計沒什麼人會和我同樣碰到這樣的要求,
   我就簡單講下,先是修改 /build/webpack.base.conf.js裏圖片的引用方式,再修改 /build/utils.js裏的 assetsPath 函數,使其碰到圖片的引用時,添加對應的路徑便可;
   特別說明:
   打包後,若是你須要使用相對路徑來引用,js,css,圖片等資源,並且圖片是放在assets中的,那麼你必定會碰到圖片引用錯誤的狀況,
   解決該狀況也比較容易:
   在 build/utils.js 中大概第47行的樣子,修改 ExtractTextPlugin.extract 爲:
   return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', // 僅添加該行便可 fallback: 'vue-style-loader' })

5. 添加自定義的全局變量:

   在 /build/webpack.dev.conf.js 文件下找到 plugins 裏的 DefinePlugin 以下,添加測試:
   js new webpack.DefinePlugin({ 'process.env': require('../config/dev.env'), 'myTest':true })
   從新啓動項目,在 main.js 裏面打印該屬性:
   js console.log(myTest) // true
   能夠發現 console 裏輸出了該屬性的值 true,一樣地在 /build/webpack.prod.conf.js 文件下也能夠添加全局變量,
   能夠經過改方法來替換本文中 1 裏的功能,能夠直接改變全局變量,而不是用當前環境來判斷;

若是須要壓縮vendor文件,能夠看我另外一篇博客 http://www.javashuo.com/article/p-xozsrrjk-eu.html
基本就這樣了,可能還有不完善的地方,若是我發現後續還會再加上;

完