使用vue+webpack建立專案的時候會自動生成乙個static資料夾,在static資料夾裡面我們可以放一些會經常變化的檔案或者**啥的,但是用的時候需要寫上絕對路徑。由於專案需要,在開發時的介面位址跟部署的介面位址不一致,所以我們要弄成可配置的,即單獨出來乙個js檔案放我們的介面位址,然後希望該js檔案不被打包進去,同時也就希望這個js檔案裡面的內容不被打包,這樣在專案打包後我們也可以對介面進行修改。
1、在static目錄下新建乙個js檔案來存放我們的介面位址
上面的apiurl放置了開發時的介面位址
2、我們需要把介面位址作為全域性變數使用,在專案的根目錄下建立.eslintrc.json檔案來放置我們的全域性變數
設定為false是說明該變數為可讀而不可寫的,為true就是可寫的
3、接下來就是在index.html頁面使用script標籤引入該檔案了,不可以使用import或者是require,如果使用了那麼檔案中的內容在其他模組中使用的時候也會被一起打包進去,所以儘管打包後更改了apiurl.js裡面的內容配置也不會起效果。
4、最後就可以在其他模組直接使用這個全域性變數啦,但是由於載入的順序問題,我們在其他模組引用這個全域性變數的時候,我們插入的這個script標籤的內容還沒有被載入出來(所以後面打包完後需要更改一下載入順序,後續講到)
用typeof判斷該變數是否已經引入了,避免還沒引入的時候使用而報錯。
5、打包,打包前我們需要更改一下我們的生產環境(不同於開發環境)的publicpath,避免放到伺服器的時候路徑不一致
6、執行npm run build打包後會發現我們的apiurl會自動的放到static/js資料夾下,不需要我們手動放進去,打包後的檔案都放在dist目錄下
手動把引入的檔案提到第乙個script標籤
7、最後就可以把我們的dist資料夾下的東西放到伺服器部署啦,介面位址改變的時候直接修改apiurl.js裡面的內容就可以啦。
webpack打包檔案
webpack.config.js是自己建立的打包檔案 在檔案的跟目錄下 引用html webpack plugin 首先要 npm install html webpack plugin s 在命令列中執行一下 let path require path 引入這個檔案就不會把相對路徑變成絕對路徑 ...
忽略檔案不打包 關於moment打包的那些事
在專案中經常用到moment庫,有沒有發現引入moment之後,專案build完的檔案大小明顯大了不少,下面就來分析一下原因,以及如何做優化。首先看下 結構 new webpack.ignoreplugin locale moment 配置忽略規則 原理 在webpack編譯階段,如果引入的檔案路徑...
webpack 打包html檔案
webpack.config.js配置檔案內容為 用來拼接絕對路徑的方法 const require path const htmlwebpackplugin require html webpack plugin module.exports loader 配置 module plugins 的配...