vue+express 同时打包多个项目,实现express+多

实现过程

• 首先先去修改路由的index页面,修改内容如下

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

base: process.env.BASE_URL的作用是在打包过后进入路由的时候加上打包过后带有的基路径

• 第二步，我们去vue.config.js文件修改一下配置文件,添加如下：

    // 这条语句的意思是在打包时给所有的引入添加上/app路径，可以根据自己的需求来命名后面的名字
    publicPath:"/app", // /app 可以修改

每个项目的名字需要不一样的名字

• 第三步我们就可以执行npm run build 来进行项目的打包了，
  之后我们讲打包好的dist文件根据之前添加的路径，修改成对应的名字。
  例如 ： publicPath:"/app" 我们就需要把dist文件名修改成app
  把所有需要打包的项目打包，并修改好文件名之后，我们就可以在已经下载好的express的public 下面加入复制好的这些文件，例如 image.png
• 第四步，我们就可以在地址栏中输入http://localhost:3000/app就可以正确的找到对应的项目了，但是此时我们刷新页面会发现出现404页面，原因在于，我们vue使用了history的历史模式。如何解决这一问题，我们参考node官网，我们可以引入connect-history-api-fallback来解决这一个问题,我们首先在文件根目录运行cmd；执行npm i connect-history-api-fallback -S,之后我们在app.js引入这个中间件
  image.png
  然后我们需要配置一下中间件如下

// 设置在路径下需要打开的文件位置
app.use('/cms',express.static(path.join(__dirname, 'public/cms')));
app.use('/app',express.static(path.join(__dirname, 'public/app')));

// 利用正则来匹配对应的地址，然后去打开对应的index页面，这样就可以解决刷新找不到对应页面出现404，然后同时实现多个vue项目打包在一起
app.use(history({
  rewrites:[
    {from:/^\/app/,to:"app/index.html"},
    {from:/^\/cms/,to:"cms/index.html"}
  ]
}))