Ant Design of Vue 使用nginx部署并热更新

要在 Nginx 上部署 Ant Design Vue 并启用热更新，您可以按照以下步骤进行操作：

1. 安装并配置 Nginx：首先，您需要在服务器上安装 Nginx。具体的安装方法因操作系统而异。安装完成后，您需要进行一些配置。
2. 创建 Nginx 配置文件：在 Nginx 的配置目录中创建一个新的配置文件，例如 /etc/nginx/conf.d/myapp.conf。在该文件中，添加以下配置：

server {
    listen 80;
    server_name your_domain.com;  # 将 your_domain.com 替换为您的域名

    root /path/to/your/app/dist;  # 将 /path/to/your/app/dist 替换为您 Ant Design Vue 打包后的 dist 目录路径

    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

确保将 your_domain.com 替换为您的实际域名，并将 /path/to/your/app/dist 替换为 Ant Design Vue 打包后的 dist 目录的实际路径。

3. 启用热更新：为了启用热更新功能，您需要在 webpack 配置中添加相应的设置。找到 Ant Design Vue 项目中的 webpack.config.js 或 vue.config.js 文件，在其中添加以下配置：

module.exports = {
    // ...其他配置项
    devServer: {
        hot: true,
        disableHostCheck: true,
    },
};

这将启用热更新并允许跨域请求。请注意，这里的配置项可能因您的项目结构和构建工具版本而有所不同。确保根据您的实际情况进行相应的配置。

4. 重启 Nginx 服务：完成以上配置后，使用适当的命令重启 Nginx 服务，以使配置生效。例如，在 Ubuntu 上，可以使用以下命令重启 Nginx：

sudo service nginx restart

5. 访问应用程序：现在，您可以通过在浏览器中输入您的域名来访问部署在 Nginx 上的 Ant Design Vue 应用程序。您对代码的任何修改都会自动触发热更新，从而在浏览器中实时显示更改。

以上步骤是一般的指导，具体的部署过程可能因您的服务器环境和项目配置而有所不同。确保根据您的实际情况进行适当的调整。