需求背景:一个域名部署多个Vue项目(Nginx)
实现方法:主项目放在根目录,其他项目放在二级目录下。
- 首先打包放在根目录的项目,正常打包即可,路由使用history 模式(PS:这里是客户要求的,大家觉得没有#号看起来会不会更舒服点?)
- 二级目录下的项目打包的时候需要指定打包输出路径 1、 vue.config.js 配置文件中,publicPath 和 outputDir 都改为 '/子目录名/'
2.、入口文件 index.html 的head 标签内加入meta标签
3、vue-router 路由文件的配置,填写二级目录
以上就完成了二级目录项目的打包,接下来展示一下打包后目录结构
因为代码中使用的路由模式是history,所以需要配置一下Nginx,防止刷新后404页面。 做法也很简单,仅需要在Nginx中配置一下404重定向即可(不知道说的标不标准)