vue 项目限制某页面路由只能由某服务器ip访问，其他的不能访问

1. 由于nginx 的内置变量只能 路径带有# 后面都获取不到，所以要想满足这个要求必须改成histroy模式

2.再nginx 中再配置就可以

具体做法：
一.vue 由hash 改成histroy

1.在router中

const createRouter = () => new Router({
  mode: 'history', // require service support
  base:'/demo/',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

2.router 中的base需要和vue.config.js中的publicPath 保持一致

module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/demo/',
  outputDir: 'dist',
  assetsDir: 'static',
.......

3.修改nginx

location ~* /test/abc {
                root /home/;
                allow 192.168.194.53;
                deny all;
                try_files $uri $uri/ /demo/index.html;
        }

        location / {
                root /home/;
                try_files $uri $uri/ /demo/index.html;
                index  index.php index.html index.htm;
        }

目录：/home/demo   下面是打包的静态文件

 

这样页面就好了，/test/abc路由 只能允许192.168.194.53这个服务器访问，项目过程中遇到的问题，亲测有效，特此记录一下。

 

参考：https://juejin.cn/post/6992769181837950984