實現(xiàn)過程

• 首先先去修改路由的index頁面,修改內(nèi)容如下

mode: "history",
base: process.env.BASE_URL

base: process.env.BASE_URL的作用是在打包過后進(jìn)入路由的時候加上打包過后帶有的基路徑

• 第二步，我們?nèi)ue.config.js文件修改一下配置文件,添加如下：

    // 這條語句的意思是在打包時給所有的引入添加上/app路徑，可以根據(jù)自己的需求來命名后面的名字
    publicPath:"/app", // /app 可以修改

每個項目的名字需要不一樣的名字

• 第三步我們就可以執(zhí)行npm run build 來進(jìn)行項目的打包了，
  之后我們講打包好的dist文件根據(jù)之前添加的路徑，修改成對應(yīng)的名字。
  例如 ： publicPath:"/app" 我們就需要把dist文件名修改成app
  把所有需要打包的項目打包，并修改好文件名之后，我們就可以在已經(jīng)下載好的express的public 下面加入復(fù)制好的這些文件，例如
  image.png
• 第四步，我們就可以在地址欄中輸入http://localhost:3000/app就可以正確的找到對應(yīng)的項目了，但是此時我們刷新頁面會發(fā)現(xiàn)出現(xiàn)404頁面，原因在于，我們vue使用了history的歷史模式。如何解決這一問題，我們參考node官網(wǎng)，我們可以引入connect-history-api-fallback來解決這一個問題,我們首先在文件根目錄運(yùn)行cmd；執(zhí)行npm i connect-history-api-fallback -S,之后我們在app.js引入這個中間件
  
  image.png
  
  然后我們需要配置一下中間件如下

// 設(shè)置在路徑下需要打開的文件位置
app.use('/cms',express.static(path.join(__dirname, 'public/cms')));
app.use('/app',express.static(path.join(__dirname, 'public/app')));

// 利用正則來匹配對應(yīng)的地址，然后去打開對應(yīng)的index頁面，這樣就可以解決刷新找不到對應(yīng)頁面出現(xiàn)404，然后同時實現(xiàn)多個vue項目打包在一起
app.use(history({
  rewrites:[
    {from:/^\/app/,to:"app/index.html"},
    {from:/^\/cms/,to:"cms/index.html"}
  ]
}))