nginx 部署 vue 笔记

Z时代
2024-01-10
分类：综合

vue

解决跨域：

开发环境中配置的跨域在将项目打包为静态文件时是没有用的，需要用 nginx 通过反向代理的方式解决这个问题

# 工作模式与连接数上限 events { ... } # 设定http服务器 http { ... server { listen 8080; # 默认端口是 80，如果端口没被占用可以不用修改 server_name localhost; root /Users/owenliu//xxxxxx/dist; # vue 项目的打包后的 dist location / { try_files $uri $uri/ @router; # 需要指向下面的 @router 否则会出现 vue 的路由在 nginx 中刷新出现 404 index index.html index.htm; } # 对应上面的 @router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件 # 因此需要 rewrite 到 index.html 中，然后交给路由在处理请求资源 location @router { rewrite ^.*$ /index.html last; } location /apis { rewrite ^/apis/(.*) /$1 break; # 重写 URI proxy_pass http://localhost:8081; # 代理接口地址 } } # .......其他部分省略 }

root /Users/owenliu/xxxxxx/dist; 的含义，这里配置的路径 /Users/owenliu//xxxxxx/dist是我当前将 vue 文件打包后存放在 liunx 下的路径，可以通过 `http://localhost:8080/ 访问到 vue 打包的静态文件。

location /apis 指拦截以 /apis 开头的请求，http请求格式为 http://localhost:8080/apis/***?page=1&size=10,。

proxy_pass http://localhost:8081; 当拦截到需要处理的请求时，将拦截请求代理到的接口地址。

rewrite, 这里是重写 URL，当拦截请求时，URI 回原样转到代理地址，也就是说请求地址为 http://localhost:8081/apis/***?page=1&size=10, 如果要像把 /apis 去掉，需要配置 rewrite ^/apis/(.*) /$1 break;, ⚠️注意这里不能配置成 rewrite ^/apis/ / break;，转发效果会是 http://localhost:8081/?page=1&size=10

参考链接：https://juejin.im/post/5b4489016fb9a04f8d6ba269

静态文件失效

组件效果不显示：
显示内容：

F12 报错：

添加以下配置就好了

# 文件扩展名与文件类型映射表 include mime.types; # 默认文件类型 default_type application/octet-stream;

图标不显示：
被误导了，之前由于不知道是 nginx 配置的问题导致的，所以按照网上的博客说的, 把 assetsPublicPath 的 / 改为 ./
```
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
```
图标不显示，我又改回原来的 / 就好了，这里不用动原来的默认配置。

Docker 部署前端

vhost 反向代理(xxxxxx.conf) /data/server/nginx/conf/vhosts

服务器的 nginx 会根据 server_name 反向代理到相应的 url

server {
    listen  80;
    server_name xxxx.com;
    access_log /data/log/nginx/xxxxx.com.access.log main;
    error_log /data/log/nginx/xxxxx.com.error.log error;
    location / {
        proxy_pass http://localhost:6501;
    }
}

修改本地 hosts 文件
```
sudo echo 'ip xxxx.com' >> /etc/hosts
```

挂载到容器的 ngxin.conf, 放到 vue 项目的 build 目录下

user  nginx;
worker_processes  1;
error_log  /dev/stderr warn;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /dev/stdout  main;
    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  65;
    gzip  on;
    gzip_types application/javascript image/* text/css;
    server {
        listen 6501;
        root /usr/share/nginx/html;
        index index.html;
        location / {
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
        location ~* \.(jpg|jpeg|png|gif|ico|svg)$ {
            expires 30d;
        }
        location ~* \.(css|js)$ {
           expires 7d;
        }
        location /apis {
            rewrite    ^/apis/(.*)$ /$1 break;  # 重写 URI
            proxy_pass http://localhost:8081; # 代理接口地址
        }
    }
    include /etc/nginx/conf.d/*.conf;
}

Dockerfile 放在 vue 项目的根目录

FROM nginx:1.15-alpine COPY dist /usr/share/nginx/html COPY build/nginx.conf /etc/nginx/nginx.conf

本地浏览器访问 http://xxxx.com

⚠️注：这里有个小插曲，由于刚接触前端，不太清楚运行流程，本来我以为前浏览器访问前端，前端在请求后端 API 时是前端的后台 Docker 容器进程发送的请求，然而，并不是这样的，后端的请求也是在浏览器发出的，所以 vhost 配置需要加入后端服务的反向代理, + 号部分为添加的：

server {
    listen  80;
    server_name xxxx.com;
    access_log /data/log/nginx/xxxx.com.access.log main;
    error_log /data/log/nginx/xxxx.com.error.log error;
    location / {
        proxy_pass http://localhost:6501;
    }
+    location /apis {
+        rewrite    ^/apis/(.*)$ /$1 break;
+        proxy_pass http://localhost:8081;
+    }
}

以上是 nginx 部署 vue 笔记的全部内容，来源链接： utcz.com/z/375008.html

nginx 部署 vue 笔记

解决跨域：

静态文件失效

Docker 部署前端

其他人也看了：