Vue项目单独部署到服务器（Nginx在Windows下使用）

最新推荐文章于 2024-08-09 19:22:24 发布
最新推荐文章于 2024-08-09 19:22:24 发布
阅读量2.8k 收藏 7
点赞数
分类专栏： vue项目部署 文章标签： vue nginx windows
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z18769643585/article/details/123293037
版权

Nginx Vue 部署 前端开发 npm build
关键词由CSDN通过智能技术生成

1、下载Nginx 

nginx: downloadicon-default.png?t=M1L8http://nginx.org/en/download.html

 

2. 下载解压（注意避坑，不能有中文路径，否则启动不起来） 

 

双击nginx.exe即可启动，会有小窗口闪烁，随即消失。

3.检查nginx是否启动

浏览器输入 http://localhost/

 4. 打包vue项目

npm run build  

 将dist中的内容拷贝到nginx的html文件夹中，并将html文件夹中存在的文件删除

 

5. 修改nginx的配置文件（按照自己项目配置后端访问接口）

6.浏览器重新访问 

爱写代码的程序员
关注
专栏目录
Windows 下IIS 部署 VUE项目教程
zjl1353911的博客
04-07 5648
本文看完可以实现,在Windows 下IIS部署一个VUE 网站
使用Nginx部署Vue项目超详细图文教程！含踩坑步骤！
热门推荐
Viper的程序员修炼手册
03-23 5万+
Nginx部署Vue项目 很多小伙伴在做完Vue项目之后，想要部署到服务器上自己运行试试。其实使用Nginx就可以轻松的做到，并且实现请求转发等功能。下面来看看使用步骤吧。 使用Nignx部署Vue项目步骤 1.打包Vue项目 npm run build 首先使用打包命令打包Vue项目，之后得到一个dist文件夹。这里面存放的是已经打包好的静态资源文件。 注意：这里不同的项目打包的命令可能不一样，具体配置可以在index.js里查看 不同的项目结构不一样哦。我使用的是vue-element-admi
vue项目打包部署在windows或linux服务器上
sheng_xinjun的博客
09-30 5646
vue项目打包部署在windows或linux服务器上
Vue环境配置（Windows）
qq_63978748的博客
08-09 1130
PS：cnpm是由淘宝NPM镜像提供的一个npm的镜像服务客户端，用于在中国大陆地区加速npm包的安装，因为直接使用npm在国内有时候会比较慢。它使用了Vue团队推荐的最新项目模板，提供了一种无需全局安装Vue CLI的方式来创建Vue项目，更加简单快捷。vue的使用需要以node.js为前提，如果您的电脑上已经安装了node.js，可直接跳过这一步。现在，你就成功创建了一个你自己的Vue项目模板， 你可以按照自己的想法对各个模块进行修改。初次创建时，会询问我们是否下载对应的依赖项，我们输入y后回车即可。
vue项目部署windows云服务器(白嫖版)
gvgjl的博客
03-23 586
今天来总结下，如何将vue项目部署至远端服务器之中--一个月白嫖版需要东西 1.nginx(远端运行你的项目配置文件，自行下载或者在我文章末端自取)2.云服务器。
【Vue】vue，在Windows IIS平台部署
花北城的博客
10-16 5033
本专栏为 前端【Vue】专栏，主要介绍Vue知识点。对于刚进入计算机世界的学生来说，学习课本上的知识是远远不够的，并且国内教材偏旧，所以需要我们通过互联网自主学习。这里普及一个知识：HTML已不仅仅只能开发Web，也可以开发移动端（AndroidiOS），所以本专栏也会介绍 移动端的开发。我个人将移动端开发，分为两大方向：①原生开发最早一批，使用安卓开发工具包（Android SDK）和Java语言来开发App的方式。原生开发允许开发者充分利用安卓平台的功能和特性，以及庞大的安卓开发社区资源。
Windows服务器部署前端vue项目
weixin_43193877的博客
03-03 1万+
阿里云Windows服务器部署前端vue项目 准备工作 下载node.js（略）http://nodejs.cn/download/ 下载Nginx http://nginx.org/en/download.html Nginx安装启用方法参考：参考1、参考2 注意：刚下载完Nginx后，没有配置环境变量的情况下，需要去Nginx文件下使用命令窗口操作 Nginx 下载完后是这样子 把打包好的dist文件放入html目录下 找到conf/nginx.config文件，用文本方式打开，进行
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
在Vue项目开发中，使用Vue CLI构建应用后，通常会通过`npm run build`命令生成一个用于部署的dist目录。然而，在将这个dist目录部署到Nginx服务器时，可能会遇到CSS样式不生效的问题。这个问题通常与静态资源的路径...
vue3 项目部署，Nginx配置https,重定向，详细流程_vue3 前端项目ngnix配置
2401_84435700的博客
04-27 400
其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。刚刚安装完成后，你的内容肯定是非常简洁的，你只需要配置对相应的参数，并可以通过保存按钮，基本是没有问题的。此时，nginx就已经安装好了，我们只需要点击nginx图标，点击配置文件选项即可使用ngnix了；一个web项目完成后，我们需要打包部署上线，关于打包的实战在我的。前端的部署，我们利用Nginx。
【前端部署】多个vue项目部署到Linux服务器
weixin_43166884的博客
08-08 1928
利用nginx将两个vue项目打包部署到服务器上，之前已在服务器上部署过单个项目， 此次在单个项目部署的基础上进行修改，并将两个项目布置在同一端口下。
服务器中用宝塔7.9面板配合Nginx部署springboot+vue前后端分离项目—超详细(包含项目打包方法)
Amy_Victoria的博客
04-20 5458
服务器中用宝塔7.9面板配合Nginx部署springboot+vue前后端分离项目—超详细(包含前后端项目的打包方法)
Windows 使用 Nginx 部署 vue 项目
Wxin0721的博客
05-07 5890
1.安装Nginx Windows 安装 Nginx 2.将打包好的vue项目，也就是 dist 文件夹内的内容 粘贴到 nginx 文件夹下的 html 文件夹内 3.修改 nginx conf 文件夹 中的 nginx.conf 将 root 修改为 html 的路径 4.启动访问即可 5.解决路由中使用 history 导致 404 的问题，将以下代码放到 location 中 index 下面即可 #解决404 try_files $uri $uri/ /i...
【Gitlab+Windows Server】CI/CD实现自动化部署vue+springboot项目(若依前后端分离)到Windows Server服务器
baidu_34861695的博客
01-18 1918
gitlab + gitlab-runner + windows server + vue + springboot 的CI/CD自动化部署 没有使用docker，比较简单，适合小项目
vue 部署
weixin_34334744的博客
12-27 597
build项目 域名是根目录 如果你的项目部署在域名的根目录如https://www.baidu.com/，则不需要进行配置,直接执行npm run build 即可。 域名后面有路径 如果是 https://www.baidu.com/XXX， 即域名后面有路径的，则需要进行如下配置： 首先修改router中的index.html, export default new Router({ m...
vue3 + springboot 简单部署到Windows服务器以及可能遇到的问题
challenglistic的博客
07-25 3272
vue3.0 + springboot前后端项目部署到Windows服务器上
Vue项目怎样打包并部署在WindowsServer服务器通过IP访问
BADAO_LIUMANG_QIZHI的博客
07-14 3225
场景 Vue本地执行build之后打开dist目录下index.html正常访问： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107332730 上面讲的将vue项目打包后在本地运行的流程与在服务器上部署基本相似。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先执行vue项目打包 npm r
【vue】部署
liangjiayy的博客
10-16 830
把vue打包后的dist目录下的所有文件拷贝到该项目的static目录下。会在该目录下生成一个dist目录，该目录下所有文件就是打包好的文件。使用node express搭建一个微型服务器，进行部署。（端口5005是上面配置的），即可访问到我们的项目。新建一个spring boot项目。启动spring boot项目。配置端口号，例如5000。3.2、在根目录下新建。使用下列命令启动该项目。
Windows环境， nginx 部署 vue
GY的的专栏
06-01 2093
首先需要在 Windows 系统上安装 Nginx，可以从官网下载 Windows 版本的 Nginx，下载地址为：http://nginx.org/en/download.html。注意：如果启动 Nginx 后访问出现 403 错误，需要给 Nginx 的安装目录和 Vue.js 应用的打包后的静态文件所在目录添加读取权限。其中，`C:/path/to/vue/app/dist` 是 Vue.js 应用的打包后的静态文件所在目录。下载完成后，解压缩到任意目录，例如：C:\nginx。
linux系统下用docker把vue部署在nginx上
最新发布
09-19
在Linux系统下，将Vue应用部署到Docker容器并通过Nginx作为反向代理服务器通常包括以下几个步骤： 1. **创建Vue应用**： 首先，确保你已经有一个Vue项目，并且它已经在本地运行起来。 2. **准备Dockerfile**： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值