博客

Vue打包程序部署到Nginx 点击跳转404问题

  • Post category:http

Vue是一个流行的JavaScript框架，它提供了构建用户界面的工具和库。但是在将Vue打包程序部署到Nginx服务器上时，可能会出现404错误。这个问题很常见，主要是由于Nginx服务器的配置问题引起的。下面是详细的攻略：

  1. 确认Nginx的配置文件

要将Vue打包程序正确地部署到Nginx服务器上，你需要首先确认Nginx的配置文件是否正确。在Ubuntu上，这个文件通常位于/etc/nginx/sites-available/default。你需要打开这个文件，并检查以下几点：

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/html;

    index index.html index.htm index.nginx-debian.html;

    server_name _;

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

首先，请确认root指定的路径是否正确。该路径应该指向你已经构建好的Vue打包程序的路径。

其次，确认index.html是否存在，这是Vue打包程序的入口文件。

最后，请找到location / {} 配置块。这个配置块的作用是告诉Nginx服务器，如果请求的URL不存在，则应该返回Vue打包程序的入口文件。如果这个配置块不正确或者不存在，则可能会导致404错误。

  1. 构建Vue打包程序

在部署Vue打包程序之前，你需要先构建该程序。在Vue中，构建命令通常是：

npm run build

这个命令将会在项目的dist目录下生成静态文件，这些文件可以被Nginx服务器正确地部署。

  1. 部署Vue打包程序

完成Vue打包程序的构建后，你可以将生成的文件部署到Nginx服务器上。这可以通过SFTP或者其他文件传输协议完成。

你可以将文件部署到默认的Nginx根目录下（在Ubuntu上是/var/www/html），或者通过修改Nginx配置文件来将Web站点配置到指定的路径下。例如，将Web站点配置到/var/www/vue目录下，你需要在Nginx的配置文件中添加以下代码：

location /vue/ {
    alias /var/www/vue/;
    try_files $uri $uri/ /vue/index.html;
}
  1. 重启Nginx服务器

完成以上步骤后，你需要重新启动Nginx服务器，以使修改后的配置生效。在Ubuntu上，可以使用以下命令来重启Nginx：

sudo service nginx restart

现在，你可以通过浏览器访问你的Vue打包程序了。例如，如果你将站点配置到了/var/www/vue/目录下，则可以使用以下URL来访问：

http://your-domain.com/vue/

如果一切顺利，你应该能够看到Vue打包程序的界面。如果出现404错误，请检查以上步骤是否正确执行。

示例一：

如果你将Vue打包程序部署到Nginx服务器上，然后尝试通过以下URL访问它：

http://your-domain.com/vue/

但是浏览器显示404错误，你可以按以上攻略的步骤来检查Nginx的配置文件和Vue打包程序的部署情况。

示例二：

如果你将Vue打包程序部署到Nginx服务器上，并且希望将它配置到自定义路径下，你需要在Nginx的配置文件中添加以下代码：

location /myvue/ {
    alias /var/www/myvue/;
    try_files $uri $uri/ /myvue/index.html;
}

此时，你可以通过以下URL来访问你的Vue打包程序：

http://your-domain.com/myvue/

注意，这里的路径与Nginx配置文件中的location路径是相同的。如果路径不一致，可能会导致404错误。

Tags: