express整合webpack的打包文件dist

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

前端開發：vue-cli+webpack；

後臺開發：nodejs框架express；

 

前端開發以後，使用localhost能正確訪問vue-cli自帶的服務器。

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

 

過程：

一、進入前端目錄，npm run build 命令直接將前端項目打包成dist文件；

二、我是直接將dist文件複製到服務器的根目錄；

三、更改routes文件夾下的index文件，將路由訪問'/'改爲渲染dist文件下的index.html；

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

 

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

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

二、將assetsPublicPath更改成'http://localhost:5777/dist';

三、整合到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, '/dist')));　　（默認爲/public）

這句話的意思是設置express訪問靜態資源的目錄，也就是express須要訪問靜態文件時都是從public入口。

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

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

 

總結來講：只須要將assetsPublicPath改成 'localhost:5777' + express.static的 '/dist' + 前端默認路徑 '/static/js |css /***';