nginx部署前端vue项目

最新推荐文章于 2024-10-18 18:45:22 发布

guaishousan

最新推荐文章于 2024-10-18 18:45:22 发布

阅读量193

点赞数 9

文章标签：前端 nginx 持续部署 vue

本文链接：https://blog.csdn.net/guaishousan/article/details/142180569

版权

构建Vue项目
首先,确保您的Vue项目已经ready for production。在项目根目录运行:
```
npm run build
```
安装Nginx
如果您还没有安装Nginx,请根据您的操作系统安装它。例如,在Ubuntu上:
```
sudo apt update
sudo apt install nginx
```

配置Nginx
编辑Nginx配置文件。通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default。添加以下server块:

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

    root /path/to/your/vue/dist;  # 替换为您的Vue项目dist目录的实际路径
    index index.html;

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

检查配置并重启Nginx
检查Nginx配置是否正确:
```
sudo nginx -t
```
如果配置正确,重启Nginx:
```
sudo systemctl restart nginx
```
设置正确的权限
确保Nginx有权限访问您的Vue项目文件:
```
sudo chown -R www-data:www-data /path/to/your/vue/dist
```
配置HTTPS (可选但推荐)
为了安全,建议配置HTTPS。您可以使用Let's Encrypt免费获取SSL证书。