nginx部署多个vue项目的方法示例_nginx部署vue项目资源-CSDN文库

3星 · 超过75%的资源 44 浏览量 2020-10-14 19:52:54 上传评论 3 收藏 144KB PDF 举报

在本文中，我们将深入探讨如何使用Nginx部署多个Vue.js项目。这通常在需要在同一域名下运行多个独立的应用程序时变得必要。我们将通过一个具体的示例来展示配置过程。我们的目标是在同一个域名下部署两个Vue项目，分别对应于`/login`和`/student/login`两个路径。这两个项目应并列存储在同一个文件夹内。 **Vue项目配置** 对于二级域名的Vue项目（例如`/student/login`），我们需要进行一些额外的配置。在`vue.config.js`文件（如果不存在，则需创建）中，我们需要修改`publicPath`，以便在生成的文件中所有资源引用都位于`/student/`下： ```javascript module.exports = { publicPath: '/student/', }; ``` 同时，我们还需要修改`src/index.html`文件，添加`<meta>`标签以设置基础路径： ```html <!DOCTYPE html> <html> <head> <meta base="/student/">  </head>  </html> ``` 在Vue项目的`src/router/index.js`中，也需要更新`base`属性： ```javascript import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export default new Router({ base: '/student/', routes: [...], }); ``` **Nginx配置** 接下来，我们需要编辑Nginx的配置文件（通常是`/etc/nginx/nginx.conf`或`/etc/nginx/sites-available/default`）。这里，我们将创建两个location块，分别对应于每个Vue项目： ```nginx server { listen 80; server_name localhost; # 配置主项目 location / { root /usr/local/sixiucheng/codes/dist; # 主项目dist目录 try_files $uri $uri/ @router; index index.html index.htm; } # 配置二级项目 location /student { alias /usr/local/sixiucheng/codes/student/; # 二级项目dist目录 try_files $uri $uri/ /student/index.html; index index.html index.htm; } location @router { rewrite ^.*$ /index.html last; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } ``` 请注意，`location /`使用`root`指令，而`location /student`使用`alias`。这是因为`root`是相对于配置文件所在目录的路径，而`alias`则是指向实际的文件系统路径。 **重启Nginx服务** 完成上述配置后，别忘了保存并重启Nginx服务以应用更改： ```bash sudo nginx -s reload ``` **故障排查** 如果遇到80端口无法访问的问题，可以检查以下几点： 1. 使用`nginx -t`命令检查Nginx配置文件是否有错误。 2. 检查本地防火墙设置，确保80端口未被阻止。 3. 如果是云服务器，检查安全组规则，确保80端口已开放。通过以上步骤，你应该能够成功地在同一个Nginx服务器上部署并运行多个Vue.js项目。记住，每个项目都需要根据其特定的路径进行相应的配置，以便Nginx能够正确地转发请求到相应的静态文件。

资源推荐

资源详情

资源评论