nginx部署多個Vue项目：二级域名配置实战

"本文主要介绍如何使用Nginx部署多个Vue.js项目，使得它们在同一域名下，通过不同的路径或二级域名来访问。我们将探讨Vue项目的配置调整以及Nginx服务器的配置方法。" 在实际的Web开发环境中，有时我们需要在一个服务器上部署多个独立的前端应用。Vue.js作为现代前端框架之一，其构建出的应用可以通过Nginx这样的反向代理服务器进行分发，以实现多项目共存。以下是一个具体的操作步骤： 1. **Vue项目准备** - 首先，确保你有两个已经构建好的Vue.js项目。一个项目可以直接部署，无需修改配置，我们假设其URL为`http://47.97.244.83/login`。 - 另一个项目需要稍作调整，以便部署在二级域名下，如`http://47.97.244.83/student/login`。打开这个项目的`config/index.js`文件，找到`build`对象下的`assetsPublicPath`属性，将其修改为`'/student/'`。这样做是为了让生成的静态资源文件引用时都包含`student`前缀。 2. **Vue项目`index.html`修改** - 在`index.html`文件中，添加`<meta base="/student/">`标签。这将改变HTML页面中所有相对URL的基础路径，确保资源请求指向正确的子路径。 3. **Vue项目构建** - 执行Vue项目的构建命令（通常是`npm run build`），生成的静态资源会带有`/student/`前缀，适合部署在Nginx的子路径下。 4. **Nginx配置** - Nginx配置文件（通常为`nginx.conf`）需要添加或修改server块，以处理两个Vue项目的路由。例如，可以添加如下配置： ``` server { listen 80; server_name 47.97.244.83; location /login { root /path/to/your/login_project/dist; index index.html; try_files $uri $uri/ /index.html; } location /student/ { alias /path/to/your/student_project/dist/; try_files $uri $uri/ /index.html; } } ``` - 这里，`/login`路径指向未修改的Vue项目，而`/student/`路径指向已做调整的项目。`try_files`指令用于处理单页应用的路由重定向。 5. **Nginx重启** - 修改配置后，保存并重启Nginx服务，以使新的配置生效。 通过以上步骤，你就可以在同一域名下，通过Nginx部署并访问两个Vue.js项目。Nginx的强大之处在于它可以根据配置灵活地分发请求，同时提供缓存、负载均衡等功能，使得多项目部署变得更加高效和简单。在实际环境中，可能还需要考虑SSL证书、HTTPS配置、跨域策略等其他因素，但基本的部署流程如上所述。