前端采用vue框架

路由采用hash模式

把前端打包好的项目直接放进 nginx/html 目录下面
image.png
nginx/nginx.conf 部分配置

  1. server {
  2.         listen        80;
  3.         server_name   www.axample.com;
  4.         #rewrite      ^ https://$server_name$request_uri permanent;
  5.         #charset koi8-r;
  7.         #access_log  logs/host.access.log  main;
  8.         # 在443端口配置里设置
  9.         location / {
  10.              root html;
  11.              index index.html index.htm;
  12.              try_files $uri $uri/ /index.html; # uri统一资源标志符
  13.         }
  14. }
  16. # 浏览器访问：
  17. https://www.axample.com/lily/
  18. https://www.axample.com/mimosa/

路由采用的都是history模式

1、router.js设置

  1. new Router({
  2.   mode: 'history',
  3.   base: '/mimosa/', 
  4.   routes,
  5. });
  7. # base 应用的基路径
  8. # 默认值: "/"。
  9. # 例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"。

2、vue.config.js修改publicPath

如果只修改了router的设置，没有修改publicPath，浏览器地址栏键入 https://www.axample.com/lily/ 首次进入由于vue-router设置的 redirect 会重定向到首页地址，正常显示网页，但是再次刷新的时候，浏览器请求的是重定向过后的地址，静态文件地址指向错乱，404一般来说就是配置和真实的路径不符合，需要指定try_files

  1. publicPath: IS_PROD ? '/lily/' : '/',  // 公共路径

publicPath
部署应用包时的基本 URL。
用法和 webpack 本身的 output.publicPath 一致，
但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

  1. 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，

例如 https://www.my-app.com/。

  1. 如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。

例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

3、nginx设置

  1. # 443端口配置
  3. location / {
  4.   root html;
  5.   index index.html index.htm;
  6.   try_files $uri $uri/ /index.html;
  7. }
  8. location /lily {
  9.   #alias /usr/local/nginx/html/lily/;#把匹配到的路径重写, 注意要以/结尾
  10.   root /usr/local/nginx/html; #在匹配到的路径前面，增加root基础路径配置
  11.   try_files $uri $uri/ /lily/index.html; # 特定目录，匹配不到文件的话，增加/lily/index.html配置
  12.   index index.html index.htm;
  13. }
  14. location /mimosa {
  15.   #alias /usr/local/nginx/html/mimosa/;
  16.   root /usr/local/nginx/html;
  17.   try_files $uri $uri/ /mimosa/index.html;
  18.   index index.html index.htm;
  19. }
  22. 浏览器访问
  23. https://www.axample.com/lily/
  24. https://www.axample.com/mimosa/

域名+端口访问配置

静态资源访问配置

  1. add_header 'Access-Control-Allow-Origin' '*';
  2. add_header 'Access-Control-Allow-Credentials' 'true';
  3. add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  4. add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

相关连接：
vue-router之mode: https://www.yuque.com/allblue-byynd/izub4k/pttgel
网站更换https ：https://www.yuque.com/allblue-byynd/izub4k/qcfkg3