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