vue多页实践-nginx部署

本文为 vue多页实践-开发 的部署章节。 环境 系统 win10nginx-1.12.2 nginx Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。本文采用 nginx win系统的安装包，直接在win上运行nginx与linux几乎无差异。 链接：https://pan.baidu.com/s/1jyGdI_zT_LpLjHcUxK_jLw 提取码：ra4r 下载后放到合适的目录解压文件无需安装。解压后如下图配置文件修改后需要重启nginx， ./nginx.exe -s reload （PowerShell 执行命令 或者git命令行）

多页-打包单应用部署 多页打包出来的单应用 （这里指多页应用 单独打包其中的一个应用）

ngixn 配置

server {
     listen       8082;
     server_name  127.0.0.1;

     location / {
         root C:\D\codeTest\vue-multiple-pages\dist;
         index index.html;
         try_files $uri $uri/ /index.html;
     }
   }

访问 http://127.0.0.1:8082/#/ 查看打包的page1应用

多页-打包多应用部署 多页打包出来的多个应用 （这里指多页应用 一次打包出所用应用）

nginx 配置

server {
     listen       8082;
     server_name  localhost;

     location / {
       root C:\D\codeTest\vue-multiple-pages\dist;
       try_files $uri $uri/ /index.html;
       index index.html;
     }

     location /page1 {
       root C:\D\codeTest\vue-multiple-pages\dist;
       try_files $uri $uri/ /page1.html;
       index page1.html;
     }

     location /page2 {
       root C:\D\codeTest\vue-multiple-pages\dist;
       try_files $uri $uri/ /page2.html;
       index page2.html;
     }
   }

若上述配置无法访问静态资源 则可尝试使用如下配置

server {
     listen       8082;
     server_name  127.0.0.1;

     location / {
         root C:\D\codeTest\vue-multiple-pages\dist;
     }
     location /index {
       root C:\D\codeTest\vue-multiple-pages\dist;
       index index.html;
       try_files $uri $uri/ /index.html;
     }

     location /page1 {
       root C:\D\codeTest\vue-multiple-pages\dist;
       index page1.html;
       try_files $uri $uri/ /page1.html;
     }

     location /page2 {
       root C:\D\codeTest\vue-multiple-pages\dist;
       index page2.html;
       try_files $uri $uri/ /page2.html;
     }
   }

访问页面 index http://127.0.0.1:8082/index#/page1 http://127.0.0.1:8082/page1#/page2 http://127.0.0.1:8082/page2#/ 本文亲身实践而来 场景不同可能遇到不同的问题，比如写的demo没有问题。在实际将项目改为多页的时候，遇到打包后资源无法加载，应用默认加载index.html等问题。多页相关的问答 也不是很多，绕了很多弯子。感谢观看—！！！ 往期文章 element-ui定制主题vue + element-ui动态主题及网站换肤2021，亲测可用！！！openlayers 实战离线地图这两个前端下载库推荐给你vue3 JSX 从零开始vue3.0实战踩坑手摸手，配置项目中全局loading