实现过程
- 首先先去修改路由的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"}
]
}))
