vue的路由模式部署到nginx上面

vue-router有两个模式：hash和history模式（面试可能会问到）

用的比较多是hash模式，配置起来也是比较简单，缺点就是地址栏会带/#,看起来不是很美观，有时的需求是将其去掉，

查了很多教程都是说开发环境，但是部署到线上环境就会报错，出现白屏

需要项目做好配置以及nginx去重定向到index.html

router.js

const router = new VueRouter({
  mode: "history",//开启history模式
  //存放在服务器的路径，这里可以配置一个变量，根据生产环境或测试环境去配置，打包起来会比较方便，不用去手动修改
  base: '/web',
  routes,
});

vue.config.js

//hash模式的配置
publicPath: './',

//history模式的配置
publicPath: '/web',

nginx.conf

这里分两种情况，大部分教程就是直接放在根目录，很少在子目录使用这个，根据项目情况，二选一 1.根目录配置

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

2.子目录配置（/web/index.html关键是/web,存放的位置重定向到index.html）

location /web {
    root   /usr/share/nginx/html;
    try_files $uri $uri/ /web/index.html;
}

** 附加功能：若通过路由跳转需要将其打包的路径改为路由的路径（/webTest）,上面的配置为原服务器，下面的配置为路由服务器**

//例如,这里原服务器就不用配置try_files，当然原服务器的地址就是访问不到的
location /webTest {
   proxy_pass https://xxxx/web/;
}