全面的前端编程教程 - 秘密武器开发者中心

热搜:m1 代理 前端 301

mac电脑本地安装nginx部署vue项目

2023-12-30 09:30:02

首先你得安装brew

  • 安装nginx-mac

$ brew install nginx  # mac安装nginx
  • 查看版本-mac

$ nginx -v  # 查看版本
  • 查看nginx-mac

$ brew info nginx #查看nginx

注意:mac安装可能遇到的问题

mac电脑本地安装nginx部署vue项目

$ brew install pcre2  # 安装出错的包
$ brew install nginx  # 安装nginx

mac电脑本地安装nginx部署vue项目

$  xcode-select --install  # 安装对应工具
$  brew install nginx  # 安装nginx
  • mac查看nginx的相关目录

brew info nginx #查看nginx

mac电脑本地安装nginx部署vue项目

mac-nginx安装目录-/opt/homebrew/Cellar/nginx/1.23.3

mac-配置文件路-/opt/homebrew/etc/nginx/nginx.conf

将打包的文件放置到安装目录/html下

mac电脑本地安装nginx部署vue项目

  • mac-启动服务命令

$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx #启动命令
  • mac-重启服务

$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx -s stop  #停止命令

注意: mac版本的nginx的默认端口为8080

nginx解决history的404问题

mac电脑本地安装nginx部署vue项目

  • 修改mac-windows配置文件

location / {
  try_files $uri $uri/ /index.html;
}

设置不论请求什么地址,都返回index.html

location /: 这个指令用来捕获所有向服务器根路径(/)发起的请求。这意味着所有对于服务器的直接请求都会通过这个配置块进行处理。

try_files $uri $uri/ /index.html; 这个指令指定了当请求到来时,Nginx 应当如何去寻找并提供资源。参数 $uri 和 $uri/ 表示 Nginx 会按照顺序去尝试以下几步:

$uri: Nginx 首先尝试直接以请求的 URI 作为文件路径去定位文件。例如,如果有人请求 /about,Nginx 会在服务器的文件系统中尝试找到名为 about 的文件。

$uri/: 如果未找到文件,Nginx 会尝试将请求的 URI 当作目录来处理,并尝试返回目录下的默认文件(通常是 index.html 或 index.htm 等,这依赖于 Nginx 配置中定义的 

index 指令)。

/index.html: 如果上述两个步骤都未能找到合适的文件或目录,Nginx 最终会尝试返回根目录下的 index.html 文件。

这种配置方式常常用于单页应用(SPA)或类似场景,就是说不论地址栏中输入哪个路径,用户都会被导向同一个 index.html 页面,然后由页面内的 JavaScript 接管路由功能。

在没有找到对应文件或目录的情况下,通常会展示一个默认的页面,或执行后续的指令。在本例中,如果没有找到匹配的文件或目录,Nginx 将默认显示根目录下的 index.html 文件。这样做可以保证不会显示 Nginx 的 404 错误页面,因为对所有未匹配的请求都提供了一个回退(fallback)的 index.html 页面。



mac电脑本地安装nginx部署vue项目

mac电脑本地安装nginx部署vue项目

  • mac重启服务

$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx -s reload  #重启
  • windows重启服务

$ ./nginx -s reload  #重启

mac电脑本地安装nginx部署vue项目

nginx配置代理解决生产环境跨域问题

mac电脑本地安装nginx部署vue项目

mac电脑本地安装nginx部署vue项目

  • 修改配置文件

location /prod-api  {
 proxy_pass https://www.mimiwuqi.com;
}
  • mac重启服务

$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx -s reload  #重启
  • windows重启服务

$ ./nginx -s reload  #重启