Windows系统下使用nginx部署vue2项目的全过程

下面是Windows系统下使用nginx部署vue2项目的全过程的攻略：

1. 搭建Node.js环境并安装vue-cli

要部署vue2项目，我们需要先安装Node.js环境。建议下载最新的LTS版本，下载链接：https://nodejs.org/en/

安装完成后，使用npm工具来安装vue-cli命令行工具，命令如下：

npm install -g vue-cli

2. 创建vue项目并编译打包

使用vue-cli可以快速创建一个vue项目，命令如下：

vue init webpack my-project

这里我们创建了一个名为my-project的vue项目，目录结构如下：

my-project
├── build
├── config
├── node_modules
├── src
├── static
├── .babelrc
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── index.html
├── package-lock.json
└── package.json

接着进入项目根目录中，安装依赖并编译打包：

cd my-project
npm install
npm run build

编译打包后，会生成一个dist目录，里面包含了我们的静态资源文件。

3. 安装nginx

接下来需要安装nginx服务器，可以在官网下载Windows版本Nginx - Official Page，选择Latest Mainline version即可。

下载完成后，将解压得到的nginx目录放在自己喜欢的位置（如D:\nginx）。在nginx目录下有一个conf子目录，里面包含了nginx的配置文件。我们现在需要修改配置文件。

4. 配置nginx

首先进入conf子目录，找到nginx.conf文件。使用编辑器打开这个文件，如果你仔细阅读这个文件，会发现其中已经包含了一段server配置：

server {
    listen       80;
    server_name  localhost;

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

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

我们需要修改这段配置，使得nginx可以指向我们生成的dist目录。

首先，将location /块改成以下内容：

location / {
    root   D:/nginx/html;
    index  index.html index.htm;
}

这里将nginx的根目录指向了D:/nginx/html目录。这个目录实际上是我们后面需要手动创建的。接着，添加以下代码：

location /api/ {
    proxy_pass http://localhost:3000/;
    proxy_set_header Host $host;
}

这段代码的作用是，如果请求的url包含/api/，则将请求转发到本地的3000端口。

5. 部署vue项目

将刚才编译得到的dist目录中的文件复制到D:/nginx/html目录中。此时，nginx服务器已经可以正常访问了。

6. 运行Node.js服务器

如果我们的vue项目中需要与后端服务器交互，需要运行一个Node.js服务器。这里以一个简单的示例来说明。

首先，我们需要安装express和body-parser这两个npm包，命令如下：

npm i express body-parser

接着，在vue项目根目录下新建一个server.js文件，代码如下：

const express = require('express')
const bodyParser = require('body-parser')
const app = express()

// Middleware to parse incoming request bodies
app.use(bodyParser.json())

// A simple endpoint to return a JSON response
app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello from the server!' })
})

// Start the server on port 3000
app.listen(3000, () => {
  console.log('Server started on port 3000')
})

代码中的注释已经说明了各个部分的功能。这里，我们只是简单地提供了一个/api/hello接口，返回一段JSON响应。为了让nginx可以转发请求到这个Node.js服务器上，我们需要运行这个服务器，在项目根目录下执行以下命令：

node server.js

至此，整个部署过程已经完成。

示例

假设这个vue项目中有一个路由，需要访问我们刚才写的/api/hello接口。我们的URL是http://localhost:8080/hello，这是我们在vue项目中的代码：

import axios from 'axios'

export default {
  methods: {
    async fetchData() {
      const response = await axios.get('/api/hello')
      this.message = response.data.message
    }
  },
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.fetchData()
  }
}

这里的axios请求url是/api/hello，而不是http://localhost:3000/api/hello。这是因为nginx在接收到URL为/api/开头的请求时，会将这个请求转发到本地的3000端口上。而/vue2/前缀则是我们在nginx配置文件中指定的。

这样的话，我们启动nginx和Node.js服务器，即可访问http://localhost:8080/hello接口，并获得来自Node.js服务器的响应。

而在服务器端，如果我们需要访问vue项目中的静态资源文件，可以通过http://localhost:8080/来访问。