说在前面的话：
Vue router有两种模式，默认的模式是hash，就是地址栏中有一个#来隔开域名和pathname。而这种方式一般在部署前后端分离项目时并不需要特殊的设定，可以这么说，项目打包后，直接放到nginx下就可以运行。
而history模式则不然，vue官方在介绍history模式时，告知这种模式需要一些配置或者需要后端来支持，所以我们看一下如何配置吧。

第一种 一个域名，多个项目

这里我要说的项目满足下面几个条件：
1、前后端分离项目
2、前端项目部署在nginx下，切nginx下为一个域名 多个项目。什么意思呢，就是你们的项目是像这样访问的：
www.test.com/project1
www.test.com/project2
www.test.com/project3
3、需要Vue-cli 3，请不要把vue的版本和vue-cli的版本混淆。
4、项目中已经有了router相关的依赖，就是在创建项目时，安装了vue-router。

假设我们的项目打包目录是abc，在nginx下需要通过www.test.com/abc这样访问,项目的主页为 www.test.com/abc/home

先配置router.js ，添加下面内容：

mode: 'history', 
base: '/abc/'

然后在routes里添加下面内容

{  path: '/',    redirect:'/home'},

第一步是保证项目是history模式和访问的路径，第二部是当用户访问域名时，如果没有加router路径，直接跳转到主页。
配置完成后大概是这样的

image.png

接下来配置vue.config.js

module.exports = {    publicPath: '/abc/',    outputDir: 'abc',    // baseUrl:'/abc/',}

这里要注意的是，publicPath和baseUrl不能同时存在，vue官方建议使用publicPath代替baseUrl

到这里，vue的配置就完成了。

接下来配置nginx

打开nginx的conf文件 并在 server中添加下面内容

        location /abc {
                           index  index.html index.htm;
                   try_files $uri $uri/ /abc/index.html;
        }

修改完后记得重启nginx命令为

/nginx目录/nginx -t
/nginx目录/nginx -s reload

这时候尝试下面几个操作
访问:www.test.com/abc 看看是否跳转到www.test.com/abc/home 是则成功，不是则配置有问题。

切换项目的页面，看看是否有502 404 500的现象，资源是否加载正常，是则成功，不是则配置有问题。

访问nginx上的其它项目，看看静态资源文件是否被刚才的配置影响，未影响则成功，影响则配置有问题。

第二种 一个域名只有一个项目，访问域名就等于访问项目

项目满足下面几个条件：
1、前后端分离项目
2、前端项目部署在nginx下，切nginx下只有一个项目，意思是nginx的root 路径就是项目路径，可以通过域名直接访问项目。
3、需要Vue-cli 3，请不要把vue的版本和vue-cli的版本混淆。
4、项目中已经有了router相关的依赖，就是在创建项目时，安装了vue-router。

router.js
参考第一种配置方法中的内容，将base修改为'/'，修改后如代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  // base: process.env.BASE_URL,
  // base: '/abc/',
  base: '/',
  routes: [
      {
        path: '/',
          redirect:'/home'
      },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

vue.config.js 参考第一种配置方法中的代码，修改publicPath为'/'，修改后代码如下：

module.exports = {
    // publicPath: '/abc/',
    // outputDir: 'abc',
    publicPath: '/',
    outputDir: 'abc',
}

nginx配置如下，配置location

location / {    
  root e:\workgit\abc;  #项目在服务器上的真实路径
  #error_page 405 =200 http://$host:8085/$request_uri;  
  index  index.html index.htm;
  try_files $uri $uri/ @rewrites; 
} 
        
location @rewrites {
  rewrite ^(.*)$ /index.html last;
}

有些项目可能是部署在Apache、Tomcat、IIS下的，请另寻解决方案。

如果有其它问题可以留言。