​在Nginx中部署Vue项目并添加路径前缀

随着前端技术的不断发展，Vue.js作为一种流行的JavaScript框架，被广泛应用于构建现代化的Web应用程序。而在生产环境中，我们通常需要借助Web服务器来部署和提供Vue应用的静态资源。Nginx作为一款高性能的HTTP和反向代理服务器，成为了许多开发者的首选。

一个案例：

一个客户提出希望在部署后的路径上添加一个项目前缀weijishu，原来访问地址是http://192.168.11.12:8888，现希望改成http://192.168.11.12:8888/weijishu才能正常访问，查阅诸多资料，从nginx部署多个前端项目中找到灵感。

server {
  listen       8081;
  server_name  localhost;
  location / { 
    #不修改此处，确保用户直接输入ip+端口无法访问到系统
    root   html;index  index.html index.htm;
  }
  location /weijishu {
    #添加前缀,但html中存放vue的目录名尽量也要改成相同名字
    alias  html/weijishu;
    index  index.html index.htm;
    try_files  $uri  $uri/   /index.html;
  }
}

改好配置后，发现页面一片空白，审查元素，发现资源文件都是404，如下图：

原因是vue打包后的资源文件默认是绝对路径，只有配置在根目录才有效。修改vue打包配置，找到vue.config.js,修改publicPath:'/'   为    ' ./  ' ，修改为相对路径

重新打包，重启nginx，启动成功。

下面详细介绍一下如何在Nginx中部署Vue项目，并为其添加路径前缀。

一、构建Vue项目

首先确保Vue项目已经构建完成。在项目的根目录下，运行以下命令来生成用于生产环境的静态文件：

npm run build

构建完成后，可以在项目的dist目录中看到生成的静态文件。

二、准备Nginx服务器

我们需要一个已经安装并配置好的Nginx服务器。如果你还没有安装Nginx，需要根据你所使用的操作系统进行安装。

三、部署Vue项目到Nginx

将Vue项目构建生成的静态文件复制到Nginx服务器的适当位置。

四、配置Nginx

打开Nginx的配置文件，一般位于/etc/nginx/nginx.conf或/etc/nginx/sites-available/default。

在配置文件中找到server块，然后添加一个新的location块来指定Vue项目的访问路径。例如，如果你想将Vue项目部署在/my-vue-app/路径下，可以添加以下配置：

server {  
    # ... 其他配置 ...  
  
    location /my-vue-app/ {  
        root /path/to/your/vue/dist;  
        try_files $uri $uri/ /my-vue-app/index.html;  
    }  
  
    # ... 其他配置 ...  
}

在上述配置中，root指令指定了Vue项目的静态文件所在的目录，try_files指令告诉Nginx如何寻找和返回文件。当请求的路径不存在时，Nginx会默认返回/my-vue-app/index.html，这对于Vue的单页应用（SPA）是非常重要的，因为它允许Vue Router接管路由。

五、验证并重新加载Nginx

保存并关闭配置文件后，你需要验证Nginx配置的正确性，并重新加载配置以使更改生效。

验证配置：

nginx -t

如果配置验证通过，没有错误，那么重新加载Nginx：

sudo systemctl reload nginx

六、访问你的Vue应用

现在，你可以通过浏览器访问http://your-server-ip/my-vue-app/来查看你的Vue应用了。Nginx将正确地处理路径前缀，并将请求转发到Vue应用的静态资源。