在Nginx上部署Vue前端项目

在Nginx上部署Vue项目

今天想在我的阿里云服务器上部署Vue项目时出了很多问题，像404 not found等，饶了很多弯路，写一篇博客来记录一下希望对大家有帮助。

在阿里云服务器上部署Lnmp

这个具体过程在Lnmp官网上有着详细的过程讲解，只要你根据其中的步骤来做就能部署成功。这里我用的xShell进行的操作。

对Nginx进行配置

首先你要找到你的nginx.conf文件进行配置 我的目录是 /usr/local/nginx/conf/nginx.conf。

如果你是一个普通的静态网页，你只需要将root目录改成你的index.html文件目录即可。如果你是vue项目则可以参考上面图片。

因为vue是单页面应用所以你的目录下的index文件可能不存在就需要进行重定向来指定文件。

配置项目文件

你需要在你的vue项目根目录中创建vue.config.js文件来配置打包路径以及你的资源放的位置。

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'dist'
}

总结

总结一下就是先配置nginx，然后配置你的文件目录在nginx.conf中，把文件上传到相应目录，最后在项目中新建vue.config.js文件并配置。接下来在项目所在目录上运行命令npm run build打包后将dist文件发送到服务器所在目录，重启服务器之后就能完成了。