qiankun框架vue3主应用和子应用生产环境打包部署nginx

首先下载nginx,进行最小化配置

用vscode 打开nginx.conf文件

在http模块的server模块里进行配置

listen 字段监听端口号 http的默认端口号是80(nginx的端口号可以随便写)

server_name字段 是ip地址 lochhost就是127.0.0.1

lacation 字段 是在浏览器的地址栏http协议+ip地址+端口号后面的url

在location字段里进行配置跨域的代码

bash 复制代码
location / {
    # 允许跨域的请求,可以自定义变量$http_origin,*表示所有
    add_header 'Access-Control-Allow-Origin' *;
    # 允许携带cookie请求
    add_header 'Access-Control-Allow-Credentials' 'true';
    # 允许跨域请求的方法:GET,POST,OPTIONS,PUT
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT';
    # 允许请求时携带的头部信息,*表示所有
    add_header 'Access-Control-Allow-Headers' *;
    # 允许发送按段获取资源的请求
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    # 一定要有!!!否则Post请求无法进行跨域!
    # 在发送Post跨域请求前,会以Options方式发送预检请求,服务器接受时才会正式请求
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        # 对于Options方式的请求返回204,表示接受跨域请求
        return 204;
    }
}

root 字段表示去哪个文件夹里资源,文件查找的路径

index 字段 是指的入口文件,默认是index.html

什么是proxy_pass

注意:proxy_pass 服务器地址的末尾加 / 和不加 /的区别

在子应用的vue.config.js文件中,要配置生产环境的publicPath 公共静态资源路径

它的作用是给静态资源的路径加前缀

publicPath只会改变打包后的index.html文件中的静态资源的路径,就是在路径前加前缀

nginx部署vue项目,给访问路径加前缀的方法:vue.config.js配置publicPath和nginx配置alias_vue配置publicpath_编写美好前程的博客-CSDN博客本文主要涉及到 Vue.js 项目部署在 Nginx 上的相关问题。其中,publicPath 选项可以用于设置 Vue.js 项目的访问路径前缀,alias 指令可以用于 Nginx 中将请求路径映射到指定的文件系统路径。同时,通过设置 Nginx 配置文件,可以将多个 Vue.js 项目部署在同一个域名下的不同路径中。使用 alias 指令可以更加方便地管理多个 Vue.js 项目,并使配置文件更加简洁易读。_vue配置publicpathhttps://blog.csdn.net/qq_27575627/article/details/130215619

相关推荐
运维&陈同学1 小时前
【zookeeper01】消息队列与微服务之zookeeper工作原理
运维·分布式·微服务·zookeeper·云原生·架构·消息队列
是阿建吖!1 小时前
【Linux】进程状态
linux·运维
明明跟你说过2 小时前
Linux中的【tcpdump】:深入介绍与实战使用
linux·运维·测试工具·tcpdump
Mr_Xuhhh3 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
朝九晚五ฺ10 小时前
【Linux探索学习】第十四弹——进程优先级:深入理解操作系统中的进程优先级
linux·运维·学习
Kkooe11 小时前
GitLab|数据迁移
运维·服务器·git
久醉不在酒12 小时前
MySQL数据库运维及集群搭建
运维·数据库·mysql
虚拟网络工程师13 小时前
【网络系统管理】Centos7——配置主从mariadb服务器案例(下半部分)
运维·服务器·网络·数据库·mariadb
墨鸦_Cormorant13 小时前
使用docker快速部署Nginx、Redis、MySQL、Tomcat以及制作镜像
redis·nginx·docker
BLEACH-heiqiyihu13 小时前
RedHat7—Linux中kickstart自动安装脚本制作
linux·运维·服务器