Vue多项目部署如何实现?

442 阅读1分钟

需求背景:一个域名部署多个Vue项目(Nginx)

实现方法:主项目放在根目录,其他项目放在二级目录下。

  • 首先打包放在根目录的项目,正常打包即可,路由使用history 模式(PS:这里是客户要求的,大家觉得没有#号看起来会不会更舒服点?)
  • 二级目录下的项目打包的时候需要指定打包输出路径 1、 vue.config.js 配置文件中,publicPath 和 outputDir 都改为 '/子目录名/'

code.png

2.、入口文件 index.html 的head 标签内加入meta标签

code.png

3、vue-router 路由文件的配置,填写二级目录

code.png

以上就完成了二级目录项目的打包,接下来展示一下打包后目录结构

1654359141931.png

因为代码中使用的路由模式是history,所以需要配置一下Nginx,防止刷新后404页面。 做法也很简单,仅需要在Nginx中配置一下404重定向即可(不知道说的标不标准)

code.png