Vue项目部署到nginx

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

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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元/天 解锁文章
                        
                    
            

        


    



                



	

		

			

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

				
			

			

				

					weixin_37883657的博客
				

				

					07-20
					
					2041
					
				

			

		

		

			
				
目录

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服务器

				
			

			

				

					田兴的博客
				

				

					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
					
					3325
					
				

			

		

		

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

			
		

	





	

		

			

				
					
Vue项目部署（Nginx）

				
			

			

				

					weixin_42067873的博客
				

				

					09-05
					
					1万+
					
				

			

		

		

			
				
vue项目部署

			
		

	



		

			
		



	

		

			

				
					
vue项目部署到nginx

					
热门推荐

				
			

			

				

					weixin_42565137的博客
				

				

					05-26
					
					6万+
					
				

			

		

		

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



			
		

	





	

		

			

				
					
Vue（六） Nginx项目部署

				
			

			

				

					这里是阿安的博客
				

				

					05-26
					
					6061
					
				

			

		

		

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

			
		

	





	

		

			

				
					
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
					
					836
					
				

			

		

		

			
				
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

				
			

			

				

					Withered Wood
				

				

					10-09
					
					644
					
				

			

		

		

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

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

取消 pid 的注释

pid   

			
		

	





	

		

			

				
					
VUE部署到nginx

				
			

			

				

					LEVsunshine的博客
				

				

					10-14
					
					847
					
				

			

		

		

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

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

cd到当前目录
cd ngTest

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

解压dist文件
unzip dist.zip

新...

			
		

	





	

		

			

				
					
【Nginx 】Nginx 部署前端 vue 项目

					
最新发布

				
			

			

				

					衍生星球的博客
				

				

					09-06
					
					1万+
					
				

			

		

		

			
				
在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。通过执行命令，可以安装项目所需的所有依赖。这一步是打包流程的前提，确保了后续编译的顺利进行。根据npm的官方数据，命令在安装依赖时，会根据文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。

			
		

	





	

		

			

				
					
vue 项目部署到nginx服务器；

				
			

			

				

					yang_yue6889的博客
				

				

					07-28
					
					166
					
				

			

		

		

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

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


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



...

			
		

	





	

		

			

				
					
vue - 项目部署到 nginx中

				
			

			

				

					Prometheus的博客
				

				

					04-07
					
					436
					
				

			

		

		

			
				
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
					
					640
					
				

			

		

		

			
				
【代码】VUE 项目 nginx部署。

			
		

	





	

		

			

				
					
Vue.js项目部署到Nginx上面

				
			

			

				

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

				

					03-29
					
					2223
					
				

			

		

		

			
				
第一步，下载并安装Nginx



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

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

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



如果发现是该界面...

			
		

	





	

		

			

				
					
将vue项目部署到nginx

				
			

			

				

					傲骨雄风的博客
				

				

					05-13
					
					1081
					
				

			

		

		

			
				
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` 目录下生成一个静态文件夹，里面包含了构建好的前端静态资源。

2. 将构建好的静态资源上传到服务器：将构建好的 `dist` 目录打包成一个 zip 文件，并上传到服务器上。

3. 安装 Nginx：在服务器上安装 Nginx，具体安装方法可以参考 Nginx 的官方文档。

4. 配置 Nginx：在 Nginx 的配置文件中添加以下内容：

```
server {
    listen 80;
    server_name yourdomain.com;  # 填写你的域名或 IP
    root /path/to/dist;  # 填写你上传到服务器的静态资源目录
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}
```

这个配置文件会将所有请求都重定向到 `index.html` 文件，从而实现前端路由的正常访问。

5. 启动 Nginx：在终端中执行以下命令启动 Nginx：

```
nginx
```

6. 访问网站：在浏览器中输入你的域名或 IP 地址，即可访问前端网站。

以上就是将前端 Vue 项目部署到 Nginx 服务器的基本步骤。需要注意的是，如果使用 HTTPS 协议访问网站，则需要在 Nginx 的配置文件中添加 SSL 证书的相关配置。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值