Vue项目部署到nginx

最新推荐文章于 2024-08-11 13:18:04 发布
最新推荐文章于 2024-08-11 13:18:04 发布
阅读量586 收藏 1
点赞数
分类专栏： 服务器 文章标签： Vue项目部署上线 nginx vue项目部署到nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Superman_peng/article/details/108199063
版权
本文详细介绍了如何将Vue项目部署到nginx服务器。首先，通过Vue打包生成dist文件夹；接着，安装并配置nginx，特别是利用docker安装；然后，将dist目录内容传输到服务器指定目录；最后，配置nginx项目配置文件，包括端口监听和root路径设定。完成这些步骤后，即可成功访问部署的Vue项目。
摘要由CSDN通过智能技术生成

1、Vue打包

执行npm run build打包项目，可看到一个dist文件夹

2、安装nginx

请参考：
docker安装 nginx 并配置反向代理

3、将dist目录下的文件传输到/test/nginx/www/目录下

这里使用的是filella软件进行本地传输到服务器
在这里插入图片描述
现在进入到/test/nginx/www目录下即可看到dist目录（存放vue项目打包文件）
在这里插入图片描述

4、配置本项目的配置文件

进入到/test/nginx/conf.d目录下，创建本项目的配置文件，并进行配置
在这里插入图片描述


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Missy Peng
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
将打包好的vue项目部署到nginx上

				
			

			

				

					weixin_37883657的博客
				

				

					07-20
					
					1901
					
				

			

		

		

			
				
目录

1、安装 nginx （我的虚拟机系统是 centos7）

2、配置 nginx

3、nginx 其他命令



准备环境：

购买一个虚拟服务器：https://www.ucloud.cn/site/active/lagou.html；

准备好一个vue项目：我的项目资源（https://gitee.com/daisy_yangyang/fed-e-task-04-02）

在虚拟机上安装 nginx


1、安装 nginx （我的虚拟机系统是 centos7）


（1）下载本地下...

			
		

	



                

              
                



	

		

			

				
					
【vue】将项目部署到nginx

				
			

			

				

					Withered Wood
				

				

					10-09
					
					564
					
				

			

		

		

			
				
文章目录Step1 打包Step2 修改配置文件Step3 查看网站nginx配置文件全部内容
Step1 打包
在项目终端打包，打包完成后会出现一个 dist 文件夹。
npm run build

将 dist 文件夹拷贝到 nginx 安装目录下的 html 文件夹中。
Step2 修改配置文件
对 nginx 进行反向代理，否则无法使用后端的api接口，会报跨域的错误。在 nginx 安装目录下的 conf/nginx.conf 配置反向代理。
修改配置如下：

取消 pid 的注释

pid   

			
		

	



                


  
              

                


	

		

			

				
					
vue3 快速入门 (七) : Vue打包并部署到Nginx服务器上

					
最新发布

				
			

			

				

					朱豪凯的博客
				

				

					08-11
					
					1336
					
				

			

		

		

			
				
介绍vue3中怎么打包，并部署到Nginx服务器上

			
		

	





	

		

			

				
					
vue项目如何部署到nginx服务器

				
			

			

				

					田兴的博客
				

				

					11-12
					
					3万+
					
				

			

		

		

			
				
mac下安装nginx
安装工具：
homebrew（还没用过的小伙伴可以点链接进行了解或者自行百度）
步骤：
1、打开终端，习惯性命令：更新
brew update


2、终端继续执行命令：
brew search nginx   //查询要安装的软件是否存在


3、这里我们多执行一步“废”命令，不过有利于我们后面的配置：
brew info nginx


我们可以看到，nginx在本地还未安装（Not installed），nginx的来源（From），Docroot默认为/usr/local/v

			
		

	



		

			
		



	

		

			

				
					
Vue项目部署到Nginx服务器

				
			

			

				

					极限突破者的博客
				

				

					05-17
					
					2649
					
				

			

		

		

			
				
本文将详细介绍如何将Vue前端项目部署到Nginx服务器。Nginx是一款开源的高性能HTTP服务器和反向代理服务器。

			
		

	





	

		

			

				
					
Vue项目部署（Nginx）

				
			

			

				

					weixin_42067873的博客
				

				

					09-05
					
					1万+
					
				

			

		

		

			
				
vue项目部署

			
		

	





	

		

			

				
					
vue项目部署到nginx

					
热门推荐

				
			

			

				

					weixin_42565137的博客
				

				

					05-26
					
					6万+
					
				

			

		

		

			
				
最近产品做了一半，要求将前端的代码部署到服务器，以前没有部署过，这可咋办呀~~。现在部署好了，给大家总结以下，里面还是有很多坑的



			
		

	





	

		

			

				
					
vue项目部署到nginx/tomcat服务器的实现

				
			

			

				

					10-16
				

			

		

		

			
				
在进行Vue项目部署到Nginx或Tomcat服务器的过程之前，需要了解一些基本概念。Vue.js是一种流行的前端JavaScript框架，用于构建用户界面和单页应用程序。Nginx是一个高性能的HTTP和反向代理服务器，而Tomcat则是一个...

			
		

	





	

		

			

				
					
Vue打包部署到Nginx时,css样式不生效的解决方式

				
			

			

				

					10-15
				

			

		

		

			
				
在Vue项目开发中，使用Vue CLI构建应用后，通常会通过`npm run build`命令生成一个用于部署的dist目录。然而，在将这个dist目录部署到Nginx服务器时，可能会遇到CSS样式不生效的问题。这个问题通常与静态资源的路径...

			
		

	





	

		

			

				
					
vue项目部署到nginx上

				
			

			

				

					y206206的博客
				

				

					08-11
					
					767
					
				

			

		

		

			
				
vue项目部署到nginx上

将vue项目打包

npm run build

打包成功后会在项目的根目录下面生成一个dist文件夹，所有的资源文件都会放在这个文件夹下面。
2. 下载并安装nginx，选择你需要的版本进行下载
nginx下载网址：http://nginx.org/en/download.html
由于我的操作系统是Windows版本，所以我下载的是windows版本的，下载后解压后的文件目录如下图所示：


启动nginx：cmd进入该文件目录，使用start nginx即可启动ngin

			
		

	





	

		

			

				
					
VUE部署到nginx

				
			

			

				

					LEVsunshine的博客
				

				

					10-14
					
					796
					
				

			

		

		

			
				
标题将vue项目部署到nginx
1、vue项目打包
执行：
npm  run build

之后会出现一个dist文件，
打包后的静态文件会输出到dist文件夹中
将dist文件压缩为zip文件
2、上传主机
cd到需要文件夹后新建目录
mkdir ngTest

cd到当前目录
cd ngTest

上传dist文件（或点上传按钮）
rz

解压dist文件
unzip dist.zip

新...

			
		

	





	

		

			

				
					
Vue（六） Nginx项目部署

				
			

			

				

					Hello World!
				

				

					05-26
					
					4284
					
				

			

		

		

			
				
Nginx 是一个轻量级、高性能的HTTP和反向代理web服务器。作为一个 HTTP Server ，其主要关心的是 HTTP 协议层面的传输和访问控制，监听相应的地址和端口，对客户端的HTTP资源请求进行响应、转发或处理，但是一个 HTTP Server 能做的始终只是把服务器上的静态资源如实的通过 HTTP 协议传输给客户端...

			
		

	





	

		

			

				
					
vue 项目部署到nginx服务器；

				
			

			

				

					yang_yue6889的博客
				

				

					07-28
					
					135
					
				

			

		

		

			
				
vue项目打包 npm run build;
打包完成显示：
2.生成dist文件夹，	下方index.html和static	

3.以上两个文件放入nginx下的html,并修改nginx配置文件nginx.conf


4.完成即可在浏览器访问，别人可通过ip:端口访问



...

			
		

	





	

		

			

				
					
vue - 项目部署到 nginx中

				
			

			

				

					Prometheus的博客
				

				

					04-07
					
					368
					
				

			

		

		

			
				
vue - 项目部署到 nginx中
1. 服务器接口配置
#端口和访问路径配置
server:
  port: 8888
  servlet:
    context-path: /api   #访问的路径api与下面的nginx配置一致

2. vue项目axios的baseUrl配置
import axios from 'axios';
const request = axios.creat...

			
		

	





	

		

			

				
					
VUE 项目 nginx部署

				
			

			

				

					Steven_yang_1的博客
				

				

					09-04
					
					600
					
				

			

		

		

			
				
【代码】VUE 项目 nginx部署。

			
		

	





	

		

			

				
					
Vue.js项目部署到Nginx上面

				
			

			

				

					有道无术，术尚可求，有术无道，止于术。
				

				

					03-29
					
					2200
					
				

			

		

		

			
				
第一步，下载并安装Nginx



第二步：双击Nginx.exe,会出现闪屏，此时Nginx已经启动，这样效果不好。

打开cmd命令窗口，切换到nginx解压目录下，输入命令 nginx.exe 或者 start nginx ，回车即可

第三步：检查Nginx是否启动成功，在浏览器地址栏输入网址http://localhost:80，回车，出现以下页面说明启动成功。



如果发现是该界面...

			
		

	





	

		

			

				
					
将vue项目部署到nginx

				
			

			

				

					傲骨雄风的博客
				

				

					05-13
					
					1023
					
				

			

		

		

			
				
1.将vue项目进行打包

npm run build，生成dist文件夹

2.下载nginx，可取nginx官网进行下载

nginx news

3.将dist文件夹拷贝到nginx文件下的html文件夹里面

4.修改nginx.config

location / {
      root html/dist;
      #root  html;
      index index.html index.htm;
   try_file...

			
		

	





	

		

			

				
					
将前端vue项目部署到nginx服务器

				
			

			

				

					06-06
				

			

		

		

			
				
将前端 Vue 项目部署到 Nginx 服务器，可以按照以下步骤进行：  1. 构建项目：在本地开发环境中，进入 Vue 项目的根目录，执行以下命令进行构建：  ``` npm run build ```  这个命令会在项目的 `dist` 目录下生成一...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值