nginx发布vue项目windows环境5

Question

我也不知道哪里错了导致的项目无法正常运行，
并且我不确定是nginx的问题还是vue打包的问题

首先我使用nginx的思路是

• 1.下载nginx文件解压到本地d盘根目录，配置nginx.conf文件

#root  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;

    #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;

    server {
        listen       8126;  ** 这是我的端口号**
        server_name  localhost;

        location / {
            gzip on; 
            gzip_min_length  1k;
            gzip_buffers 4 16k;
            gzip_comp_level 5;
            gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;
            gzip_vary on;
            gzip_disable "MSIE [1-6]\.";
            root html/dist;                **这是我打包文件的相对路径**
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
      }
}

• 2.在目录D:\nginx-1.24.0使用cmd 运行 start nginx
• 3.在浏览器输入localhost:8126/dist 访问显示500错误(localhost:8126也显示500)

下面是我vue打包的流程

1. 配置vue的vue.config.js文件

**相对路径问题不存在。这个方面不用回答了**
module.exports = {
    devServer: {
        open: true,
        port: 8126,
        https: false,
        hotOnly: false,
        proxy: {  
            '/api': {
                target: 'http://192.168.18.43', 
                ws: true,
                changOrigin: true,  //允许跨域
                pathRewrite: {
                    '^/api': '' 
                }
            }
        }
    },
    chainWebpack: config =>{
        config.plugin('html').tap(args => {
            args[0].title = '自研系统';
            return args;
        })
    },
}

1. 运行yarn build打包，打包生成上面的dist文件，上文有图片。

有发现问题的可以联系我私信我都可以

Answer 1

1、看看nginx日志
2、你的这个访问路径不对，直接访问 localhost:8126就行了，自动解析 dist里面的index.html了