vue打包部署到nginx上流程 windows

在Windows环境下，将Vue应用程序打包并部署到Nginx服务器上的流程如下：

1. 安装Node.js：在Windows上安装Node.js，官方网站提供了Windows安装包，您可以从 https://nodejs.org 下载并安装。

2. 创建Vue项目：打开命令提示符或PowerShell，并使用以下命令创建一个新的Vue项目：

   vue create my-vue-app

您可以根据需要选择使用默认配置或手动配置Vue项目。

3. 构建Vue项目：进入您的Vue项目目录，并执行以下命令来构建Vue项目：

   cd my-vue-app
   npm run build

这将在项目目录中创建一个名为`dist`的文件夹，并在其中生成用于部署的静态文件。

4. 安装和配置Nginx：下载适用于Windows的Nginx安装程序，您可以从 https://nginx.org/en/download.html 下载并安装最新版本。安装完成后，打开Nginx配置文件（通常位于`C:\nginx\conf\nginx.conf`），并进行以下配置更改：

   http {
     ...
     server {
       listen       80;
       server_name  localhost;
       root         C:/path/to/my-vue-app/dist;
       index        index.html;
       ...
     }
     ...
   }

将`C:/path/to/my-vue-app/dist`替换为您Vue项目构建输出的实际路径。

5. 启动Nginx服务器：在命令提示符或PowerShell中，切换到Nginx安装目录（例如`C:\nginx`），然后执行以下命令启动Nginx服务器：

   start nginx

确保Nginx成功启动，并且没有报告任何错误。

6. 访问Vue应用程序：现在，您可以在浏览器中访问`http://localhost`来查看部署的Vue应用程序。

请注意，以上步骤仅为一般指导，实际操作可能会因个人配置和需求而有所不同。确保您正确配置了Nginx，并将路径和端口号等参数根据您的实际情况进行相应更改。