使用Nginx部署前端Vue项目_vue项目部署到nginx其他电脑能访问吗-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_28296757/article/details/142014868

我们开发好的前端项目，需要怎么部署到服务器。本篇文章就给大家介绍一下怎么部署前端项目，可以通过互联网访问到我们做好的项目。

Nginx

首先部署前端需要安装Nginx，Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，也叫静态资源服务器。类似的还有Tomcat，Apache等。HTTP服务器，顾名思义可以通过HTTP访问，所以我们就可以通过互联网访问的。如果我们要把开发好的项目部署给其他人访问，需要使用云服务器，没有云服务器可以使用本地nginx部署。想学习云服务器部署的，可以观看这个教程，也是本人录制的。前后端项目部署入门学习，前端项目自动部署。

下载Nginx环境

首先我们需要下载Nginx环境，这里我们使用集成环境就行。不想用集成环境的，也可以自己手动安装Nginx，手动安装教程在视频里也有，可以去视频学习。从Nginx官网下载Nginxhttps://nginx.org/en/download.html，选择对应的系统版本。
nginx下载

Windows版本下载完成后，解压压缩包，看到解压文件里面有nginx.exe文件，双击运行。
nginx安装

然后打开浏览器，在地址栏输入127.0.0.1或者localhost，可以看到页面正常显示，说明nginx已经安装成功。
nginx安装成功

打包前端项目

这里我们使用的是Vue项目。把打包好的项目放到Nginx目录中的html，这个目录就是我们输入localhost访问的目录，默认访问的index.html文件。

在这里插入图片描述
然后在浏览器地址栏输入http://localhost/dist/，此时访问的是dist下面的index.html。正常的话就显示我们开发项目的主页了。如果看到的是空白页，说明是其他静态资源路径不对，这时要在vue或者vite.config.js设置base字段为’./'，这样就设置为相对路径。

// https://vitejs.dev/config/
export default defineConfig({
  base: './',  // 添加这行，设置为相对路径
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

重新打包后把新的dist文件夹放到nginx里的html，替换原来的dist，重新打开浏览器访问即可成功显示页面。

至此，项目部署成功。以上就是前端项目部署在nginx的操作。如果要在云服务器上部署的话会也是一样的。