+-
首页 专栏 vue.js 文章详情
![头图]()
关注作者
关注作者
0
一招解决Vue多页面路由history模式【开发到部署】
vipbic 发布于 38 分钟前
开启多页面模式
module.exports = { pages: {}, }
官方文档-多页面配置
路由模式
const mainRoutes = [ { path: "/", name: "main", component: Layout, redirect: "/home", children: [ { path: "/home", name: "home", component: () => import("@/html/sysadmin/views/home/home"), meta: { title: "home", }, }, ], }, ]; const router = new Router({ mode: "history", // 配置history模式 base: "/sysadmin", // 取个应用路径名字 routes: mainRoutes, });
官方文档-vue-Router base
开发模式
vue.config.js
添加以下配置
publicPath:'/', // 注意publicPath的路径是斜杠 configureWebpack: { devServer: { historyApiFallback: { verbose: true, rewrites: [ { from: /^\/index\/.*$/, to: "/index.html" }, { from: /^\/sysadmin\/.*$/, to: "/sysadmin.html" } ], }, }, },
线上nginx模式
打包目录
配置nginx
server { listen 9041; server_name pb5; client_max_body_size 500m; location / { root /usr/local/dist; index index.html index.htm; } location ^~ /api { # api接口代理 rewrite ^/api/(.*)$ /$1 break; proxy_set_header Host $host:9041; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_pass http://192.168.10.38:8080; # 内网IP } # 注意nginx的执行顺序是先匹配的 /sysadmin的 ，然后再匹配 / location /sysadmin { # 这里的配置就是相当于配置了个路径，然后nginx做了一层拦截 root /usr/local/dist; index sysadmin.html; try_files $uri $uri/ /sysadmin.html; } }
如果你的项目是二级目录,需要这样配置，对比看下不同店
location / { # 根目录 root /usr/local/dist; index index.html index.htm; } location ^~/sysadmin{ roxy_redirect off; # 如果是域名需要打开，ip不需要 alias /usr/local/dist/sysadmin; # 二级目录 index index.html index.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 会去尝试到网站目录读取用户访问的文件，如果第一个变量存在，就直接返回；不存在继续读取第二个变量，如果存在，直接返回；不存在直接跳转到第三个参数上。
vue.js nginx vue-router history router
阅读 25 发布于 38 分钟前
举报
赞
收藏
分享
本作品系原创， 采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
vipbic
vipbic是一个关注前端开发、网址导航、学习视屏免费下载、HTML5、CSS3、JavaScript、PHP的前端杨航开发...
关注专栏
vipbic
1.5k 声望
438 粉丝
0 条评论
得票数 最新
提交评论
vipbic
1.5k 声望
438 粉丝
宣传栏
目录
▲
开启多页面模式
module.exports = { pages: {}, }
官方文档-多页面配置
路由模式
const mainRoutes = [ { path: "/", name: "main", component: Layout, redirect: "/home", children: [ { path: "/home", name: "home", component: () => import("@/html/sysadmin/views/home/home"), meta: { title: "home", }, }, ], }, ]; const router = new Router({ mode: "history", // 配置history模式 base: "/sysadmin", // 取个应用路径名字 routes: mainRoutes, });
官方文档-vue-Router base
开发模式
vue.config.js
添加以下配置
publicPath:'/', // 注意publicPath的路径是斜杠 configureWebpack: { devServer: { historyApiFallback: { verbose: true, rewrites: [ { from: /^\/index\/.*$/, to: "/index.html" }, { from: /^\/sysadmin\/.*$/, to: "/sysadmin.html" } ], }, }, },
线上nginx模式
打包目录
配置nginx
server { listen 9041; server_name pb5; client_max_body_size 500m; location / { root /usr/local/dist; index index.html index.htm; } location ^~ /api { # api接口代理 rewrite ^/api/(.*)$ /$1 break; proxy_set_header Host $host:9041; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_pass http://192.168.10.38:8080; # 内网IP } # 注意nginx的执行顺序是先匹配的 /sysadmin的 ，然后再匹配 / location /sysadmin { # 这里的配置就是相当于配置了个路径，然后nginx做了一层拦截 root /usr/local/dist; index sysadmin.html; try_files $uri $uri/ /sysadmin.html; } }
如果你的项目是二级目录,需要这样配置，对比看下不同店
location / { # 根目录 root /usr/local/dist; index index.html index.htm; } location ^~/sysadmin{ roxy_redirect off; # 如果是域名需要打开，ip不需要 alias /usr/local/dist/sysadmin; # 二级目录 index index.html index.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 会去尝试到网站目录读取用户访问的文件，如果第一个变量存在，就直接返回；不存在继续读取第二个变量，如果存在，直接返回；不存在直接跳转到第三个参数上。
