+-
大背景简要交代一下:
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的配置规则我反复读了很多遍,也结合实践各种尝试,但是都没有效果,不知道问题在哪,请各路大神指点
你这不是 nginx 配置的问题,是 vue.config.js 没弄明白。
从你贴的信息上来看,你打包后的 publicPath
应该配成 /static/
,而不是 /home/jeethink/distribution/
。
另外 nginx 配置里最后面两个 location
都可以删掉。
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 / {
}
}