vue项目使用nginx部署

最新推荐文章于 2024-04-14 10:56:25 发布
最新推荐文章于 2024-04-14 10:56:25 发布
阅读量316 收藏 2
点赞数
分类专栏： 知识储备 vue常见问题 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/my_web_advanced/article/details/107315522
版权 
 本地部署与服务器端部署类似，先在本地部署，没问题再远程服务器部署
 本地部署便于后期调试等

本地部署

  1. 运行npm run bliud，会在项目下生成dist文件夹
  2. 将dist文件夹放到nginx下的html中
  3. 在nginx下面的conf / nginx.conf里面配置端口号，路径在这里插入图片描述
  4. 开端口号
  5. 运行nginx
  6. 过程中可能会一直修改上述文件调试，每次调试都需要重新运行nginx
    在cmd中，执行 nginx -s reload
  7. 部署完成后，不运行项目，可以在地址栏输入 localhost：端口号，来查看项目
    把本地npm run dev运行的项目关掉

服务器端部署

  1. 运行npm run bliud，会在项目下生成dist文件夹
  2. 将dist文件夹放到nginx下的html中
  3. 在nginx下面的config里面配置端口号，路径
  4. 运行nginx
my_web_advanced
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用nginx部署配置
hqzxsc2006的专栏
05-06 487
一、打包(mode:history) a.打开config的文件夹中的index.js 如图把assetsPUblicPath修改为‘/’ b.路由里修改mode，为的是把url的“#”去掉。路由path前面全部要加上/ c.npm run build打包后的dist目录上传到服务器的/opt目录下 二、nginx配置 //前端 location / { proxy_s...
Vue项目部署到Nginx服务器
最新发布
极限突破者的博客
05-17 1673
本文将详细介绍如何将Vue前端项目部署到Nginx服务器。Nginx是一款开源的高性能HTTP服务器和反向代理服务器。
Vue（六） Nginx项目部署
Hello World!
05-26 3736
Nginx 是一个轻量级、高性能的HTTP和反向代理web服务器。作为一个 HTTP Server ，其主要关心的是 HTTP 协议层面的传输和访问控制，监听相应的地址和端口，对客户端的HTTP资源请求进行响应、转发或处理，但是一个 HTTP Server 能做的始终只是把服务器上的静态资源如实的通过 HTTP 协议传输给客户端...
Nginx部署Vue项目
Fanger_travel的博客
03-01 2981
root>：项目存放目录（如果只发布一个项目，就是直接把dist拷贝到html文件夹下这种情况，可以直接用html，否则要指定文件夹）如下图，<listen>项为nginx监听的端口，默认是80。（5）打开浏览器，输入网址：http://localhost:9528（假设配置文件中端口修改成9528）完成上一步后，打开我们的配置文件<nginx.conf>，找到<server>节点，修改参数。②打开cmd，cd切换到nginx所在文件夹下，输入命令：start nginx，回车。包解压后会得到如下目录。
nginx部署vue项目
hahaha的博客
01-29 910
所有的配置文件都在/etc/nginx下，并且每个虚拟主机已经安排 了/etc/nginx/sites-available下。日志放在了/var/log/nginx中并已经在/etc/init.d/下创建了启动脚本nginx。这边我把数据库db文件放在了springboot项目的resource路径下。默认的虚拟主机的目录设置在了/var/www/nginx-default。可以在项目的target目录下看到打包好的jar包。程序文件在/usr/sbin/nginx。目录下，后面的&表示会在后台执行。
Vue在Nginx的使用
qq_32436781的博客
10-12 177
Vue项目编译，部署 一、Vue编译 使用shell脚本实现一体化编译，打包； #!/bin/bash #卸载 sudo apt-get remove -y nodejs echo "====版本检测开始====" #检测node是否安装 if ! type node >/dev/null 2>&1; then echo 'node no exist!' node_check=`sudo apt-get install -y nodejs` fi #查看node版本 n
xshell连接ECS服务器安装nginx
QQ00821的博客
06-13 568
1.环境安装 1.gcc 安装，安装 nginx 需要先将官网下载的源码进行编译，编译依赖 gcc 环境，如果没有 gcc 环境，则需要 yum install gcc-c++ 2.PCRE pcre-devel安装，PCRE（Perl Compatible Regular Expressions）是一个Perl库，包括 perl 兼容的正则表达式库。 nginx 的 http 模块使用 pcre 来...
vue项目 使用nginx代理
weixin_30847939的博客
03-23 288
nginx是一个高性能的HTTP和反向代理服务器。因此常用来做静态资源服务器和后端的反向代理服务器。本文主要记录使用nginx去部署使用vue搭建的前端项目，项目基于vue官方的脚手架vue-cli构建。 打包vue项目 npm run build 通过上面命令后打包好的静态资源将输出到dist目录中。如图所示 如图所示 修改nginx配置文件，配置文件为conf下的nginx.c...
nginx的安装、配置、使用、实战（反向代理，部署vue项目）
ShockChen7的博客
12-28 5115
接下来使用nginx简单配置一个反向代理的实例 实现效果：使用 nginx 反向代理，根据访问的路径跳转到不同端口的服务中 nginx 监听端口为 9001，在本地windows机中访问虚拟机的nginx， 我的虚拟机的ip为192.168.186.43，
vue在nginx中部署
wwwyuanliang10000的专栏
04-02 6583
vue在nginx中部署本文主要介绍如何在nginx中部署vue前端。本文阅读前提：1、已经安装好nginx，可以参考如下文章：http://blog.csdn.net/wild46cat/article/details/780249892、已经打好vue的包，如果遇到问题，可以参考：http://blog.csdn.net/wild46cat/article/details/78024796好，...
用Nginx将前端Vue项目部署到云服务器（含代理实现请求跨域）
m0_62556296的博客
10-24 2548
记录使用Nginx将的Vue3项目部署到阿里云服务器（Ubuntu 22.04）上，包含通过Nginx代理实现、以及个人踩坑记录~
Vue--使用Nginx解决跨域问题
IT利刃出鞘的博客
11-09 3980
跨域 其他网址 https://www.bookstack.cn/read/happy_book_vuejs/nginx_fix_cross_domain_problem.md
Vue项目部署（Nginx）
weixin_42067873的博客
09-05 1万+
vue项目部署
Vue项目部署到服务器（使用nginx）
Curry_2019的博客
04-14 1435
使用nginx部署vue项目到服务器，需要服务器先配置好nginx。
nginx - 使用nginx部署vue项目到本地以及代理和负载均衡
qq_43886365的博客
09-29 9087
使用nginx部署vue项目到本地以及代理和负载均衡
Nginx部署vue项目
qq_40501683的博客
01-27 1万+
步骤一：项目打包 打开vscode终端 在终端输入 npm run build 这时可以看到生成dist文件夹，我们要放在服务器上的文件就在这， 步骤二：配置nginx 找到在官网下载的安装包。
手把手教 Nginx 部署 Vue 项目
热门推荐
csdn_life18的博客
08-06 2万+
想必大家一定听说过 Nginx，若没听说过它，那么一定听过它的 同行 Apache 吧！Nginx 同 Apache 一样都是一种 Web 服务器。如果你还是对它不够了解，可以自己去深入的学习一下 Nginx 相关的知识，这里不做过多的介绍了，今天我们就来聊聊使用 Nginx 如何来部署我们开发好的前端 Vue 项目。......
vue部署到nginx
weixin_45079813的博客
11-26 7928
nginx 1、安装nginx 2、到nginx的安装目录下使用 start nginx启动nginx服务 3、nginx的主配置文件在/conf/nginx.conf 4、修改vue项目里的vue.config.js的配置文件 添加publicPath选项，根据你需要部署的路径来进行设置。 // 值根据你所需要部署的项目路径来，如果是根目录，只需要修改成/即可 module.exports = { publicPath: '/testWeb/' } 5、打包部署文件 npm 6、将打包部署后的文件放
vue项目docker nginx部署
03-14
Vue项目的Docker+Nginx部署可以通过以下步骤完成： 1. 创建Dockerfile：在Vue项目的根目录下创建一个名为Dockerfile的文件，内容如下： ``` # 使用Node作为基础镜像 FROM node:14 as build-stage # 设置工作目录 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值