Nginx快速部署vue项目

  • Z时代
  • 2024-01-10
  • 分类：综合

编程

将vue项目交给Nginx其实也很简单，我们通过npm run build 命令打包后 会得到dist文件，如下，我们只需要将该文件夹下所有文件都copy到Nginx指定访问的目录下就好了，或者是将我们指定的Nginx访问路径指定到dist的目录也是一样的效果。

  •  我们将build好的目录文件copy到  /soft/vue-test/目录下

  • 编写Nginx配置文件 其实也可以在原有的nginx.conf中修改 我们这里新增一个配置 并将其配置在全局的nginx.conf 中去,自定义的配置文件 vue-nginx.conf 
    内容如下 
        server {
            listen       8181;
            server_name  local;
            root /soft/vue-test;
            index index.html;
            client_max_body_size 20m;
            client_body_buffer_size 128k;
            }

    并在主配置nginx.conf文件中添加  include /usr/local/nginx/conf/vue-nginx.conf;
     
    可通过nginx -t 来验证配置文件是否正确
    然后重新加载启动nginx即可

  • 开放8181端口  
    firewall-cmd --zone=public --add-port=8181/tcp --permanent      
    firewall-cmd --reload
     然后在浏览器就可通过8181端口访问项目了  

以上是 Nginx快速部署vue项目 的全部内容， 来源链接： utcz.com/z/515118.html

回到顶部