Vue项目部署在Nginx服务器上的系列步骤

最新推荐文章于 2025-03-02 21:01:06 发布

风里有诗句

最新推荐文章于 2025-03-02 21:01:06 发布

阅读量698

点赞数

分类专栏： vue 文章标签： vue.js nginx

本文链接：https://blog.youkuaiyun.com/qq_43378800/article/details/111591925

版权

vue 专栏收录该内容

21 篇文章

订阅专栏

Vue项目部署在Nginx服务器后404怎么解决
由于小编对nginx确实不是很会，此处可参考该文章对nginx有所了解: 掘金-Nginx从入门到实践，万字详解

1、首先根据后端给的接口，修改vue.config.js中的基地址和端口，如图：
在这里插入图片描述

2、进行vue项目打包，把发布的文件上传到服务器指定目录例如:/app/dist,此处我使用的是xftp软件

3、打开xshell 连上服务器，连接成功后输入以下指令：

查看路径
whereis nginx
切换到安装目录并重启

cd /usr/local/nginx/sbin/    #切换到安装目录
./nginx -s reload            #重启

4、指令确实没记住，我只能采用投机取巧的方式了，通过xshell的目录指示，在Xftp中找到对应的/nginx/conf目录，然后将nginx.conf文件下载到本地进行修改

5、nginx.conf 简单说明

#user nobody; 
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; 
      # 因为access_token 参数名带下划线 所以要设置 
      # nginx代理默认会把header中参数的 "_" 下划线去掉，所以后台服务器后就获取不到带"_"线的参数名。
 
      underscores_in_headers on; 
      #该属性默认为off，表示如果header name中包含下划线，则忽略掉。
 
      #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; 


      #gzip on; 
      #upstream cdcc_web{ 
     # server localhost:80; 
 # }
 server { 
      listen 80;    #设置访问端口80 直接用ip访问即可 
      server_name localhost;  #绑定的域名 如果有可以写 类似www.baidu.com这种,没有就写 localhost即可
       
      #charset koi8-r; 
      
     #access_log     logs/host.access.log    main; 
     location / {
         root      /app/dist/;              #文件地址 
         index     index.html index.htm;    #默认首页 
       }
    # 这两个localtion 类似vue里面的代理设置 
    # 匹配方式有多种 可以去网上查找 或者下面配置文件中有示例 
    # 匹配到/cdcc 设置代理地址  重点为下面两个配置
   location ~  /cdcc {
   proxy_pass  http://  #后端提供的接口; 
 } 
    # 匹配到/file 设置代理地址 
    location ~ /file/ { 
    rewrite ^/file/(.*)$ /$1 break;
    proxy_pass http:// #后端提供的接口;
 } 
  
    # 静态页面跳转 
#        location ~ .*\.(html|htm|txt|js|css|gif|jpg|jpeg|bmp|png|ico|txt|m3u8)$ 
#        { 
		    # root页面存放路径  
#  			root /app/imageData; 
#  			index index.jsp; 
# 			expires 30s;   
# 		}
		#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;  
		 }
		 # 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; 
  		 #} 
   }