目录

1 下载地址：nginx: download

 1.1 修改nginx的启动端口

1.2 若提示端口已被占用的解决办法

 1.3 Win下nginx的常用指令

2.代理

2.1 启动后端项目，并确定启动的ip和端口号，如127.0.0.1:9999

2.2 启动前端项目

 2.2.1 配置vue.config.js文件

2.2.2 查看package.json文件

2.2.3 启动前端

3 修改conf\nginx.conf配置文件，使前后端正常运行

---

对于前后端分离项目而言，需要nginx的反向代理

1.下载地址：nginx: download

解压后

        nginx.exe为启动应用程序，点击后会一闪而过则表示启动成功，默认端口为80

        conf为配置文件所在位置，后续反向代理本地ip和端口时需要修改文件conf\nginx.conf

 

 1.1 修改nginx的启动端口

打开conf\nginx.conf文件可以看到大量的配置信息，其中需要注意的是server的配置信息，此处listen 80即为默认启动时监听的端口，server_name localhost即为监听的ip，修改这两处配置即可修改nginx启动时默认监听的ip和端口

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

1.2 若提示端口已被占用的解决办法

进入CMD窗口，输入netstat -ano|findstr 80即可查看所有涉及80端口的程序，记录下对应的PID，之后输入tasklist，找到对应的映像名称，利用资源管理器关闭到对应的应用程序即可。

 1.3 Win下nginx的常用指令

指令只能在对应nginx安装路径下进入CMD窗口执行才有效

启动
start nginx

按照指定配置去启动nginx
nginx.exe -c conf/nginx.conf
 
检测nginx是否配置正确
nginx -t -c conf/nginx.conf

修改配置后重新加载生效
nginx -s reload  

快速停止nginx,可能并不保存相关信息
nginx -s stop

完整有序的停止nginx,并保存相关信息.
nginx -s quit

2.代理

2.1 启动后端项目，并确定启动的ip和端口号，如127.0.0.1:9999

2.2 启动前端项目

前端项目需要源码，而不是npm打包后的文件

 2.2.1 配置vue.config.js文件

需要配置前端项目启动的ip和端口，此处将端口设置为8001（可自行设置），需要格外注意的是^/api，这是因为nginx反向代理时会默认携带前缀，此处仅提醒，不需额外担心。

vue.config.js

'use strict';
const path = require('path');
const Timestamp = new Date().getTime();

function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    runtimeCompiler: true,
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    outputDir: 'dist',
    assetsDir: 'static',
    lintOnSave: false,
    productionSourceMap: false,
    devServer: {
        client: {
            overlay: false
        },
        host: 'localhost', // can be overwritten by process.env.HOST

        port: 8001,
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:9999',
                ws: true, // 是否启用websockets
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            },
        },
    },

    configureWebpack: {
        plugins: [],
        name: '',
        resolve: {
            alias: {
                '@': resolve('src'),
            },
        },
        output: {
            filename: `js/[name].${Timestamp}.js`, // 每次构建打包时给文件名加上时间戳，确保每次版本更新的文件名不一样
            chunkFilename: `js/[name].${Timestamp}.js`,
        },
    }
};

2.2.2 查看package.json文件

在package.json文件中，有如下配置，可以看到，serve即为默认的启动配置项

  "scripts": {
    "serve": "vue-cli-service serve",
    "build:prod": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test",
    "build:dev": "vue-cli-service build --mode staging",
    "lint": "vue-cli-service lint",
    "commit": "npx git-cz"
  },

2.2.3 启动前端

打开前端项目所在文件夹的CMD终端，若为第一次启动项目，需要安装依赖后才能正常启动

安装依赖
npm install

启动项目
npm run serve

3 修改conf\nginx.conf配置文件，使前后端正常运行

修改nginx的监听端口，并配置正确的后端ip和端口，之后运行nginx即可，若在此之前已启动nginx，修改配置后输入重加载指令

修改配置后重新加载生效
nginx -s reload 

    server {
        listen       8001;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://127.0.0.1:9999;
        }
    }