### 配置和部署Nginx #### 安装Nginx 为了在项目中配置和部署Nginx，首先需要确保有一台安装了Linux（如Ubuntu或CentOS）的服务器，并确认Node.js和npm已经安装。尽管Node.js和npm并非部署Vue项目至Nginx所必需，但对于本地构建Vue项目来说非常重要[^1]。 对于Nginx本身的安装，在基于Debian的系统上可以通过`apt-get install nginx`完成；而在基于RedHat的系统，则可利用`yum install nginx`来实现。这一步骤完成后应验证Nginx服务状态以确保其正常启动。 #### 构建Vue项目 使用`npm run build`命令能够生成适用于生产环境下的静态资源文件。这些由Webpack打包后的HTML、CSS以及JavaScript等静态资产会被放置于项目的`dist/`目录下，这是后续Nginx提供服务的基础[^2]。 ```bash npm run build ``` #### 创建或编辑Nginx配置文件 接下来要做的就是针对具体的Web应用程序调整Nginx的行为方式。通常情况下，会在`/etc/nginx/sites-available/default`找到默认站点配置模板，或是新建一个专门用于当前应用的服务定义文档。这里的关键在于设置正确的根路径指向之前提到过的`dist/`位置： ```nginx server { listen 80; server_name localhost; location / { root /path/to/dist/; index index.html index.htm; try_files $uri $uri/ /index.html; } } ``` 特别需要注意的是最后一行`try_files $uri $uri/ /index.html;`的存在意义——它解决了单页应用(SPA)框架常见的刷新页面即丢失路由信息的问题，通过重定向所有未匹配成功的URL回到首页让前端路由器接管处理逻辑[^4]。 #### 测试与激活新配置 每次更改过Nginx配置之后都应当先执行一次语法检测(`nginx -t`)以防错误发生影响线上业务稳定性。一旦确认无误便可通过发送信号给正在运行中的进程使其读取最新的设定而无需重启整个HTTP daemon(`nginx -s reload`)。 ```bash sudo nginx -t sudo systemctl restart nginx ``` 以上便是完整的关于如何在一个已有Vue CLI创建的应用程序之上集成并发布到互联网上的全过程概述。