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 <进程号>