• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

Ngnix运行vue项目

开发技术 开发技术 7小时前 4次浏览

前后端分离项目,前端项目用ngnix启动vue页面项目

1. 下载安装包

下载地址,解压后是一个文件夹
Ngnix运行vue项目

2. 部署vue

  1. 找到自己的vue的项目然后输入命令 npm run build 会在vue目录下生成一个dist文件夹里面就是你的vue的项目
  2. 然后打开这个dist文件夹把里面的内容复制下来里面会有两个文件一个是index.html是主目录还有一个是static文件夹
  3. 把他们复制下来然后打开你的nginx的目录下的html文件里面会有两个默认文件直接删掉不要留,然后把你刚刚复制的文件粘贴进去
  4. 运行起来登录时发现请求头拿取不到,到conf文件夹的ngin.conf设置 :underscores_in_headers on
  5. 详情
    `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;
tcp_nopush          on;
tcp_nodelay         on;
types_hash_max_size 2048;
client_max_body_size 20M;

#keepalive_timeout  0;
keepalive_timeout  65;

gzip  on;

upstream localserver {
    #这里配置服务器的地址,刚才我们启动的是8080端口,localserver是我们自定义取的名称,可以更换成其它的名称,注意不要和nginx本身的一些名词冲突就行
server 127.0.0.1:8080;
}


server {
    listen 9999;#这里是nginx监听的端口,就是一会儿浏览器打开的端口,访问的时候用http://testhosts.com:9999,如果这个地方改成80端口,那么就只需要用http://testhosts.com访问就行,多个server可以同时监听80端口,然后代理域名用不同的名字就行
    server_name  testhosts.com;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;
	
root D:pluginsproduct_pagedist;#这里是前端页面的根路径
location / {
        
        index  index.html index.htm;
    }
	
location ^~/api/ {#这里表示浏览器所有以/testhosts.com:9999/api开头的请求,经过nginx代理,到服务器都用localserver/api/请求,实际localserver就是上面我们配置服务器地址
  proxy_pass  http://localserver/api/;
    }

}`

3. 双击nginx.exe,闪退属于正常,然后打开浏览器输入localhost出来如下图片所示就说明成功了

Ngnix运行vue项目

4. 停止nginx的时候,需要启动任务管理器结束进程(屏幕下方右键调出菜单栏),

或者使用命令:

从容停止服务:nginx -s quit

立即停止服务:nginx -s stop

systemctl 停止:systemctl属于Linux命令
systemctl stop nginx.service

killall 方法杀死进程:killall nginx

`


程序员灯塔
转载请注明原文链接:Ngnix运行vue项目
喜欢 (0)