Angular項目打包部署到Express本地服務器（同樣適用於Vue、React項目）

步驟一：執行npm run build命令，生成打包文件dist（此處注意dist文件夾下可能多了一層以項目命名的文件夾，將其中的內容copy到dist文件夾下並刪除以項目命名的文件夾）

步驟二：使用express-generator快速搭建express本地服務器

全局安裝express-generator

$ npm install express-generator -g

搭建express本地服務器

express --view=ejs myapp

安裝依賴包

$ cd myapp
$ npm install

啓動

$ npm run start

瀏覽器輸入localhost:3000就可以看到啓動成功的本地服務器

步驟三：將步驟一的dist文件夾copy到myapp目錄下，修改app.js文件，將‘public’修改爲‘dist’。

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

步驟四：重新啓動，瀏覽器輸入localhost:3000查看。（如果項目路由使用的是history模式，刷新瀏覽器會報404錯誤，請看我的另一篇文章《connect-history-api-fallback中間件解決history路由模式瀏覽器刷新404問題》）