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

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

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

vue 項目從 dev 切換到 prod 時有很多地方需要注意;

1. 首先是大家最需要注意的 ajax 切換環節
   以前一開始用 Vue 的時候我是在 build 之后,手動修改 ajax 的請求前綴
   比如現在我使用的 axios,

   axios.defaults.baseURL = 'api' 
   

   但是打包的時候一般都要改動 url,直到我后來知道了 process.env 這個對象,
   使用他可以獲取當前的環境(后續還會提到,如何修改這個對象)
   之后就可以輕松的修改 ajax 的基礎路徑了:

   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改為:

   productionSourceMap:false
   

   在 build 之前需要檢查一下該屬性;

4. build 之后需要相對路徑的引用:

   也許大家都知道了,在一般項目 build 之后都會生成一個 index.htm 文件和 一個 static 文件夾,而 static 這個文件夾需要被放置在根目錄下,
   index.html 會在決定路徑下引用該文件
   如果需要添加模塊的話,只需要在 /config/index.js 文件下的 build 對象下,修改 assetsSubDirectory 屬性為:

   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 如下,添加測試:

   new webpack.DefinePlugin({
       'process.env': require('../config/dev.env'),
       'myTest':true
   })
   

   重新啟動項目,在 main.js 里面打印該屬性:

   console.log(myTest) // true
   

   可以發現 console 里輸出了該屬性的值 true,同樣地在 /build/webpack.prod.conf.js 文件下也可以添加全局變量,
   可以通過改方法來替換本文中 1 里的功能,可以直接改變全局變量,而不是用當前環境來判斷;

如果需要壓縮vendor文件,可以看我另一篇博客 https://www.cnblogs.com/Grewer/p/9033530.html
基本就這樣了,可能還有不完善的地方,如果我發現后續還會再加上;

完