VUE配置打包部署服务器Nginx代理访问配置域名

上传服务器有多种方式
第一种：github.com建立私有项目，现在免费开放，本地push到github，服务器从github再pull下来。
第二种：使用FTP软件上传，比如FileZilla等等。
第三种：服务器搭建Git自动化部署。
前两种适合小型项目，第三种适合团队协作规范开发。

打包之前配置文件
build/utils.js 配置解决打包后找不到静态文件的问题

publicPath: '../../',

config/index.js 解决js文件找不到的问题

assetsPublicPath: './',

终端输入npm run build 打包，生成dist文件夹
dist文件夹和package.json为同级目录，放到服务器上，可以用以上三种方法
配置Nginx代理访问配置域名，找到nginx.conf文件,注意空格该有就要有，没有就没有

vi /usr/local/nginx/conf/nginx.conf

user www www; worker_processes auto; error_log /home/wwwlogs/nginx_error.log crit; pid /usr/local/nginx/logs/nginx.pid; #Specifies the value for maximum file descriptors that can be opened by this process. worker_rlimit_nofile 51200; events { use epoll; worker_connections 51200; multi_accept on; } http { include mime.types; default_type application/octet-stream; server_names_hash_bucket_size 128; client_header_buffer_size 32k; large_client_header_buffers 4 32k; client_max_body_size 50m; sendfile on; tcp_nopush on; keepalive_timeout 60; tcp_nodelay on; fastcgi_connect_timeout 300; fastcgi_send_timeout 300; fastcgi_read_timeout 300; fastcgi_buffer_size 64k; fastcgi_buffers 4 64k; fastcgi_busy_buffers_size 128k; fastcgi_temp_file_write_size 256k; gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.1; gzip_comp_level 2; gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; gzip_vary on; gzip_proxied expired no-cache no-store private auth; gzip_disable "MSIE [1-6]\."; #limit_conn_zone $binary_remote_addr zone=perip:10m; ##If enable limit_conn_zone,add "limit_conn perip 10;" to server section. server_tokens off; access_log off; server{ listen 80 default_server; #listen [::]:80 default_server ipv6only=on; server_name _; index index.html index.htm index.php; root /home/wwwroot/default; #error_page 404 /404.html; # Deny access to PHP files in specific directory #location ~ /(wp-content|uploads|wp-includes|images)/.*\.php$ { deny all; } include enable-php.conf; location /nginx_status { stub_status on; access_log off; } location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; } location ~ .*\.(js|css)?$ { expires 12h; } location ~ /.well-known { allow all; } location ~ /\. { deny all; } access_log /home/wwwlogs/access.log; } ##start server { listen 80; server_name www.centby.com;#设置域名 #charset koi8-r; #access_log logs/host.access.log main; root /var/backstage/dist;#dist文件目录 location / { # root html; try_files $uri $uri/ @router;#history模式，解决vue路由在Nginx中刷新404的问题 index index.html index.htm; } location @router{ rewrite ^.*$/ index.html last; } location ~ ^/api/ { rewrite ^/api/(.*)$ /$1 break; proxy_pass http://x.centby.com; } #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 html; } } ##end include vhost/*.conf; }

重启Nginx服务

//进入目录 cd /usr/local/nginx/sbin //测试 ./nginx -t //重启服务 ./nginx -s reload 

现在就可以访问了

常用命令

//配置代理访问 vi /usr/local/nginx/conf/nginx.conf //进入目录 cd /usr/local/nginx/sbin //启动 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf //测试 ./nginx -t //重启服务 ./nginx -s reload //查看进程 ps -ef|grep nginx //关闭并重启 kill -HUP <进程号> //从容停止服务 kill -QUIT <进程号> kill -TERM <进程号>