开启多页面模式module.exports={pages:{},}官方文档-多页面配置路由模式constmainRoutes=[{path:"/",name:"main",component:Layout,redirect:"/家”,孩子们:[{路径:“/家”,名称:“家”,组件:()=>导入(“@/html/sysadmin/views/home/home”),元:{标题:“家",},},],},];constrouter=newRouter({mode:"history",//配置历史模式base:"/sysadmin",//取一个应用路径名routes:mainRoutes,});官方文档-vue-Router基础开发模式vue.config.js添加如下配置publicPath:'/',//注意publicPath的路径是斜线configureWebpack:{devServer:{historyApiFallback:{verbose:true,rewrites:[{from:/^\/index\/.*$/,to:"/index.html"},{from:/^\/sysadmin\/.*$/,to:"/sysadmin.html"}],},},},在线nginx方式打包目录配置nginxserver{listen9041;服务器名称pb5;client_max_body_size500m;位置/{root/usr/local/dist;indexindex.htmlindex.htm;}location^~/api{#api接口代理重写^/api/(.*)$/$1break;proxy_set_header主机$host:9041;proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$remote_addr;proxy_set_headerREMOTE-HOST$remote_addr;proxy_passhttp://192.168.10.38:8080;#内网IP}#注意nginx的执行顺序是先匹配/sysadmin,再匹配/location/sysadmin{#这里的配置相当于配置了一个路径,然后nginx做了一层拦截root/usr/local/距离;索引sysadmin.html;try_files$uri$uri//sysadmin.html;}}如果你的项目是二级目录,需要这样配置,比较不同的存储位置/{#根目录root/usr/local/dist;indexindex.htmlindex.htm;}location^~/sysadmin{roxy_redirect关闭;#如果是需要开通域名,ip不需要alias/usr/local/dist/sysadmin;#二级目录索引index.htmlindex.htm;try_files$uri$uri//sysadmin/index.html;}你可以解释一下这篇文章关于alias$uri这是nginx的一个变量,里面存放的是用户访问的地址,比如:http://xxx.com/sysadmin/sysadmin.html,$uri就是sysadmin.html$uri/代表访问的一个目录,比如:http://xxx.com/sysadmin/requirelist/,那么$uri/就是/sysadmin/requirelist/nginx中try_files的意思:try_files会尝试读取用户访问的文件在网站目录下,如果第一个变量存在,如果不存在,继续读取第二个变量,如果存在,直接返回;如果不存在,直接跳转到第三个参数。
