express整合webpack的打包檔案dist

標籤：載入   新項目   nodejs   uil   nbsp   conf   伺服器   exp   local   

對於我來說，第一次接觸前後端整合問題的小白，剛開始是一臉懵逼，這個問題整整坑了我一個晚上加一個早上，現在寫出來總結；

前端開發：vue-cli+webpack；

後台開發：nodejs架構express；

 

前端開發之後，使用localhost能正確訪問vue-cli內建的伺服器。

而在後台方面，一開始我是直接在expres的views和public上開發前端頁面，因此在一些配置方面都是上個項目的，現在整合新項目，讓我有點方。

 

過程：

1、進入前端目錄，npm run build 命令直接將前端項目打包成dist檔案；

2、我是直接將dist檔案複製到伺服器的根目錄；

3、更改routes檔案夾下的index檔案，將路由訪問‘/‘改成渲染dist檔案下的index.html；

結果：訪問伺服器，靜態資源404；

 

二次改進過程：（經過大量的查資料）

1、找到vue-cli項目下的config檔案夾下的index.js檔案，找到build部分的assetsPublicPath;(接下來會說一下assetsPublicPath的作用）

2、將assetsPublicPath更改為‘http://localhost:5777/dist‘;

3、整合到express伺服器上

結果：

src="http://localhost:5777/dist/static/js/manifest.0d43cb9e3c7036b97742.js"　

 這個時候我就懵逼了，這不就是正確的路徑嗎？

可是還是404，這就尷尬了。

亂入一下assetsPublicPath知識點：

看了一下官方文檔，蹩腳英語的我又懵逼了，我說一下大致意思，assetsPublicPath可以指定輸出檔案的公用地址在瀏覽器的引用。

首先，webpack在打包的時候已經為你寫好了dist檔案中靜態資源的引用，也就是‘./static/js|css/***‘,也就是用戶端訪問dist可以載入靜態資源。

但當dist部署到express上的時候，訪問伺服器時候，靜態資源的url為：assetsPublicPath  +  ‘./static/js | css/ ***‘;

也就是上面代碼所表示的。

 

可為什麼還是404呢？這就關乎到express的問題了。

在app.js的配置中，有這樣一行代碼：

app.use(express.static(path.join(__dirname, ‘/public‘)));　　

這句話的意思是設定express訪問靜態資源的目錄，也就是express需要訪問靜態檔案時都是從public入口。

所以第二種情況的地址實際上訪問的是   src="http://localhost:5777/dist/dist/static/js/manifest.0d43cb9e3c7036b97742.js"　

也就是assetsPublicPath中的localhost:5777和express.static中的dist重複了。

 

express整合webpack的打包檔案dist