一、vue前端打包成dist
1、使用webstorm一键打包
2、打包有可能失败的原因:添加了模拟数据
xz-unity-operation-res\src\main.js
if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('../mock')
mockXHR()
}
3、所放的文件目录这里去掉了dist文件夹直接放到工程名下
二、Linux服务器上安装nginx并且进行相关配置
1、安装nginx忽略
2、在配置中添加本地跳转:
/usr/local/nginx/conf/nginx.conf
- 有的nginx只有上述一个配置文件,有的会写多个conf文件然后include如:
-
user root; worker_processes 1; error_log /var/log/nginx/error.log 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 /var/log/nginx/access.log main; sendfile on; #tcp_nopush on; keepalive_timeout 65; #gzip on; include /etc/nginx/conf.d/*.conf; }
server { listen 80; server_name localhost; #charset koi8-r; #access_log /var/log/nginx/host.access.log main; location / { root /usr/share/nginx/html; index index.html index.htm; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } server { listen 8020; server_name localhost; charset utf-8; location / { root /data/java/xz-unity-operation-res/; #try_files $uri $uri/ /index.html; } }
这只介绍一个总配置文件的:
-
因为有多个代理所以避免串号(这是个坑有时候会访问不了)另起一个端口配置如这的8010和80端口:
-
location / { root /home/java/test/14-xz-unity-operation-res; index index.html index.htm; }
下方是总配置情况
-
#user nobody; user root; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include 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 logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; proxy_temp_path /usr/local/nginx/cache/img_temp 1 2; proxy_cache_path /usr/local/nginx/cache/img levels=1:2 keys_zone=cache_one:20m inactive=1d max_size=1g; #gzip on; gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_comp_level 2; gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_proxied any; gzip_vary on; server { listen 80; server_name localhost; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; location /xz-sms { proxy_pass http://10.10.22.145:8011/xz-sms; } location /knowledge-contest { proxy_pass http://10.10.22.145:8010/knowledge-contest; } location /xz-app { root /home/java/test/01-xz-app-middle-server-8001; } location /knowledge-contest-resources { root /home/java/prod/04-xz-ajiaedu-knowledge-contest-8010/files; } location /xz-unity-operation-res { alias /home/java/test/14-xz-unity-operation-res; index index.html index.htm; } location /zhengding-res { root /home/zhengding; } location /wx-auth-res { root /home; } location /demo { proxy_pass http://10.10.22.145:8081/demo; } location /app-middle-resources { autoindex on; autoindex_exact_size off; autoindex_localtime on; root /home/java; } } server { listen 8010; server_name localhost; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; location / { root /home/java/test/14-xz-unity-operation-res; index index.html index.htm; } location /api { rewrite ^/api/(.*) /$1 break; proxy_pass http://10.10.22.145:8190/doc.html; } } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.html; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} }
其中vue会用到api接口工程所以记得写代理,rewrite记得写:
-
location /api { rewrite ^/api/(.*) /$1 break; proxy_pass http://10.10.22.145:8190/doc.html; }
3、第一次得重启nginx