nginx部署前端vue项目教程

一、部署

要在Nginx上部署前端Vue项目，你需要将构建好的Vue项目文件放置在Nginx服务器的某个目录下，并配置Nginx的配置文件来正确地提供这些静态文件。

以下是部署Vue项目的基本步骤：

1.在你的Vue项目根目录中运行构建命令：

npm run build

或者如果你使用的是Yarn：

yarn build

2.将构建后的内容（通常在dist目录）上传到你的服务器。

3.配置Nginx。编辑Nginx的配置文件，通常位于/etc/nginx/nginx.conf或者/etc/nginx/sites-available/目录下的某个文件。

假设你的Vue项目被构建并且所有的文件都在/var/www/my-vue-app/dist目录下，你可以使用以下配置：

server {
    listen 80;
    server_name your-domain.com;
 
    location / {
        root /var/www/my-vue-app/dist;
        try_files $uri $uri/ /index.html;
    }
}

4.重启Nginx以应用更改：

sudo systemctl restart nginx

确保你的Vue项目的publicPath在vue.config.js中设置为/，这样打包的时候资源引用才会正确。

如果你的Vue项目需要运行在非根路径下，你需要调整publicPath并相应地调整Nginx配置中的路径。

二、配置

要使用nginx部署Vue工程，您需要进行以下配置：

1. 安装Nginx：首先确保您已经在服务器上安装了Nginx。如果没有，请根据您的操作系统进行安装。

2. 配置Nginx：打开Nginx的配置文件，通常位于`/etc/nginx/nginx.conf`。添加以下配置：

server {
    listen 80;
    server_name your_domain.com; // 替换成您的域名或IP地址

    location / {
        root /path/to/your/vue/project/dist; // 替换成您Vue工程dist文件夹的路径
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

3. 保存配置文件并重启Nginx服务。

sudo service nginx restart

4. 验证：在浏览器中访问您的域名或IP地址，应该能够看到您的Vue工程的界面。

请注意，上述示例假设您的Vue工程已经构建并生成了静态文件，将它们放在了`/path/to/your/vue/project/dist`路径下。如果您的路径不同，请相应地进行调整。

此外，还可以根据需要进行其他Nginx配置，例如启用HTTPS、反向代理等。有关更多Nginx配置信息，请参考Nginx官方文档。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。