一招解决Vue多页面路由history模式【开发到部署】

开启多页面模式

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 会去尝试到网站目录读取用户访问的文件，如果第一个变量存在，就直接返回；不存在继续读取第二个变量，如果存在，直接返回；不存在直接跳转到第三个参数上。