环境
nginx
- Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。
- 本文采用 nginx win系统的安装包，直接在win上运行nginx与linux几乎无差异。
- 下载后放到合适的目录解压文件无需安装。解压后如下图
- 配置文件修改后需要重启nginx，
./nginx.exe -s reload （PowerShell 执行命令 或者git命令行）
多页-打包单应用部署
- 多页打包出来的单应用 （这里指多页应用 单独打包其中的一个应用）
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应用
多页-打包多应用部署
- 多页打包出来的多个应用 （这里指多页应用 一次打包出所用应用）
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等问题。多页相关的问答 也不是很多，绕了很多弯子。
- 感谢观看---！！！
往期文章
