将Vue项目部署在Nginx,解决前端路由、反向代理和静态资源问题

将Vue项目部署在Nginx,解决前端路由、反向代理和静态资源问题

需求：

一台服务器，Linux

安装了Nginx

使用Vue脚手架编写的Vue项目

第一步：将Vue项目打包，然后将生成的dist文件夹中的内容放入服务器中的

• 打包

  npm run build

• 生成的dist目录
  

• 上传在服务器上（这里用的是宝塔管理面板）
  

第二步，修改Nginx配置，并进行反向代理

• 在Nginx配置中新增一个监听路由

  server
  {
  listen 80;
  server_name xxxx.xyz;
  …… 其他路由
  location /此Vue路由名
  {
  alias /www/wwwroot/放置Vue页面的目录/;
  try_files $uri $uri/ /此Vue路由名/index.html;
  index index.html in