nginx location配置无效，求助

Question

大背景简要交代一下：

ubuntu20.04真机，x86_64架构
网络接入是ipv6

问题描述：
index.html可以请求到，但是二次请求的css和js资源都是404

[nginx的access日志]ipv6地址简化为一堆冒号了

2409::::::: - - [21/May/2021:09:59:49 +0800] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
2409::::::: - - [21/May/2021:09:59:49 +0800] "GET /home/jeethink/distribution/static/css/chunk-libs.5cf311f0.css HTTP/1.1" 404 564 "http://myDomainName.net:1024/" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
2409::::::: - - [21/May/2021:09:59:49 +0800] "GET /home/jeethink/distribution/static/css/app.ccac8f49.css HTTP/1.1" 404 564 "http://myDomainName.net:1024/" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
2409::::::: - - [21/May/2021:09:59:49 +0800] "GET /home/jeethink/distribution/static/js/chunk-elementUI.7e7a8c4a.js HTTP/1.1" 404 564 "http://myDomainName.net:1024/" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
2409::::::: - - [21/May/2021:09:59:49 +0800] "GET /home/jeethink/distribution/static/js/chunk-libs.f0c3503b.js HTTP/1.1" 404 564 "http://myDomainName.net:1024/" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
2409::::::: - - [21/May/2021:09:59:49 +0800] "GET /home/jeethink/distribution/static/js/app.8e30ed33.js HTTP/1.1" 404 564 "http://myDomainName.net:1024/" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"

[vue.config.js]片段

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "/home/jeethink/distribution/" : "/",
  ...
}

[nginx.conf]如下

worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 768;
        multi_accept on;
}

http {
        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;
        
        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}

[/etc/nginx/sites-enabled/myDomainName.net]这是一个以我的域名命名的配置文件

server{
        listen 1024;
        listen [::]:1024;

        server_name myDomainName.net;

        location / {
                root /home/jeethink/distribution;
                try_files $uri $uri/ =404;
                index index.html;
        }

        location ^~ /home/jeethink/distribution/ {
                root /home/jeethink/distribution/;
                try_files $uri $uri/ =404;
        }

        location ~* \.(css|js)$ {
                root /home/jeethink/distribution/static/;
                try_files $uri $uri/ =404;
        }

        location ~* \.css$ {
                root /home/jeethink/distribution/static/css/;
                try_files $uri $uri/ =404;
        }
}

location的配置规则我反复读了很多遍，也结合实践各种尝试，但是都没有效果，不知道问题在哪，请各路大神指点

Answer 1

你这不是 nginx 配置的问题，是 vue.config.js 没弄明白。

从你贴的信息上来看，你打包后的 publicPath 应该配成 /static/，而不是 /home/jeethink/distribution/。

另外 nginx 配置里最后面两个 location 都可以删掉。

Answer 2

publicPath可以配置为 './'

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/

比如你的前端项目包位于服务器/home/frontPage/xxx

nginx 配置

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /home/frontPage/xxx;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }
   
    }