要使用 Nginx 来部署前端 Vue 项目,你需要做以下几步:
-
构建 Vue 项目:在你的 Vue 项目根目录下运行
npm run build
,这将创建一个dist
目录,包含编译后的静态文件。 -
配置 Nginx :编辑 Nginx 的配置文件(通常是
/etc/nginx/nginx.conf
或者 /etc/nginx/sites-available/default
,或者其他你指定的配置文件),设置一个 server 块来指向你的 Vue 项目的 dist
目录。
以下是一个简单的 Nginx 配置示例:
server {
listen 80;
server_name your-domain.com; # 替换为你的域名或IP
location / {
root /path/to/your/vue/project/dist; # 替换为你的Vue项目dist目录的绝对路径
try_files $uri $uri/ /index.html;
}
}
-
重启 Nginx :保存配置文件并重启 Nginx 服务。
命令行操作如下:
sudo nginx -s reload # 重新加载配置文件
# 或者
sudo systemctl restart nginx # 如果你的系统使用systemd来管理服务
确保你的 Vue 项目已经构建,并且 Nginx 配置文件中的 root
路径指向了正确的 dist
目录。此外,确保你的 Vue 项目中的路由模式(mode
)设置为 history
,这样 Nginx 需要正确处理 SPA 页面的路由。