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

相关推荐
Jason-河山22 分钟前
【自动化更新,让商品信息跳舞】——利用API返回值的幽默编程之旅
运维·自动化
雨雪飘零29 分钟前
Windows系统使用OpenSSL生成自签名证书
nginx·证书·openssl
lihuhelihu35 分钟前
第3章 CentOS系统管理
linux·运维·服务器·计算机网络·ubuntu·centos·云计算
哲讯智能科技37 分钟前
SAP Business One市场价格解析
运维·sap·erp
山东布谷科技官方1 小时前
布谷直播源码部署服务器关于数据库配置的详细说明
运维·服务器·数据库·直播系统源码·直播源码·直播系统搭建·直播软件开发
One_Blanks1 小时前
渗透测试-Linux基础(1)
linux·运维·安全
yanwushu1 小时前
Xserver v1.4.2发布,支持自动重载 nginx 配置
mysql·nginx·php·个人开发·composer
爱吃喵的鲤鱼1 小时前
linux进程的状态之环境变量
linux·运维·服务器·开发语言·c++
dessler1 小时前
Linux系统-ubuntu系统安装
linux·运维·云计算
向阳12181 小时前
Dubbo负载均衡
java·运维·负载均衡·dubbo