記錄 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 函數,使其碰到圖片的引用時,添加對應的路徑即可;

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 裏的功能,可以直接改變全局變量,而不是用當前環境來判斷;

基本就這樣了,可能還有不完善的地方,如果我發現後續還會再加上;

完

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