vue项目打包部署_nginx代理访问方法详解

下面是“vue项目打包部署_nginx代理访问方法详解”的完整攻略：

前言

本攻略旨在帮助Vue开发者将自己的项目成功打包并部署到Nginx上，实现可访问的效果。在此之前，你需要有一定的Vue开发经验和一台云服务器。

第一步：打包Vue项目

打包Vue项目的方法很简单，只需要在项目根目录下输入以下命令即可：

npm run build

以上命令将会自动将当前Vue项目打包到/dist目录下。

第二步：部署到Nginx

首先，需要确认你的服务器已经拥有Nginx，如果没有请先安装Nginx。安装完成后，找到以下文件并编辑：

/etc/nginx/nginx.conf

在文件内找到以下代码块：

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
}

对于上面的代码块，我们需要将其改为：

server {
    listen       80;
    server_name  yourdomain.com;

    location / {
        root   /path/to/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

注意：将其中的 yourdomain.com 改成你自己的域名，将 /path/to/dist 改成你打包后的目录，例如 /root/myvue/dist。

完成后，保存文件并重启Nginx：

sudo systemctl restart nginx

第三步：访问Vue项目

现在，你就可以通过浏览器访问你的Vue项目主页了。只需要在地址栏输入你的服务器IP或者域名即可。

示例1：使用IP地址进行访问

假设你的服务器IP地址是192.168.1.100，那么你可以在浏览器输入以下地址进行访问：

http://192.168.1.100/

示例2：使用域名进行访问

假设你的域名是www.myvue.com，那么你可以在浏览器输入以下地址进行访问：

http://www.myvue.com/

总结

以上就是Vue项目打包部署和Nginx代理访问的详细攻略，通过本攻略的方法，你可以轻松实现Vue项目的上线和可访问。