Nginx部署vue项目

2020-11-30

1. 修改index.js文件

打包部署之前，需要对vue项目的index.js文件进行一些修改。

proxyTable的效果就是将以/api字段起始的本地接口请求代理到了http://服务器ip:8888这一域名下，例如http://localhost:8080/api/location/getAllUSers ===> http://服务器ip:8888/location/getAllUSers
assetsPublicPath
target

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: './',   // 部署在服务器上时用这句
    // assetsPublicPath: '/',   // 本地调试用这句 
    proxyTable: {    
      "/api":{
        target: 'http://服务器ip:8888',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
    }
     
},

build: {
    // assetsPublicPath: '/',     // 本地调试的时候用这句
    assetsPublicPath: './',  // 部署在服务器上时用这句
}

2. 打包Vue项目

1	npm run build

打包vue项目，生成dist文件夹

将dist文件夹上传到服务器上，我这里是上传到了/usr/local/webserver/nginx/vue

3. 修改Nginx的配置文件

#user  root;
worker_processes 8; #设置值和CPU核心数一致
error_log /usr/local/webserver/nginx/logs/nginx_error.log crit; #日志位置和日志级别
pid /usr/local/webserver/nginx/nginx.pid;
#Specifies the value for maximum file descriptors that can be opened by this process.
worker_rlimit_nofile 65535;
events
{
  use epoll;
  worker_connections 65535;
}
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';
  
#charset gb2312;
     
  server_names_hash_bucket_size 128;
  client_header_buffer_size 32k;
  large_client_header_buffers 4 32k;
  client_max_body_size 8m;
     
  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 128k;
  gzip on; 
  gzip_min_length 1k;
  gzip_buffers 4 16k;
  gzip_http_version 1.0;
  gzip_comp_level 2;
  gzip_types text/plain application/x-javascript text/css application/xml;
  gzip_vary on;
 
  #limit_zone crawler $binary_remote_addr 10m;
 #下面是server虚拟主机的配置
server
{
    listen 8089;#监听端口
    server_name localhost;#域名
    root /usr/local/webserver/nginx/vue;#站点目录

   location / {
      try_files $uri $uri/ @router;
      index  index.html;
   }

   location /api/ {
        rewrite  ^/api/(.*)$ /$1 break;
        proxy_pass   http://服务器ip地址:8080/;
   }
      
   location @router {
        rewrite ^.*$ /index.html last;
   }
        
   location ~ .*\.(js|css)?$ {
      expires 15d;
   # access_log off;
   }
    access_log off;
  }

}

重新载入配置文件
/usr/local/webserver/nginx/sbin/nginx -s reload
检查配置文件nginx.conf的正确性
/usr/local/webserver/nginx/sbin/nginx -t

4. 关闭Nginx、启动Nginx、查看进程

关闭

1	/usr/local/webserver/nginx/sbin/nginx -s stop

启动

1	/usr/local/webserver/nginx/sbin/nginx

查看进程

1	ps -ef \| grep nginx

5. 将Vue部署到部署到服务器后Element UI图标不显示问题

打开build/utils.js文件，在如下位置添加publicPath: '../../'

if (options.extract) {
    return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'  //为了部署在Nginx上，防止部分elementui的效果不显示
    })
} else {
    return ['vue-style-loader'].concat(loaders)
}

1. 修改index.js文件

2. 打包Vue项目

3. 修改Nginx的配置文件

4. 关闭Nginx、启动Nginx、查看进程

5. 将Vue部署到部署到服务器后Element UI图标不显示问题

参考