vue项目部署在windows下的nginx服务器上

最新推荐文章于 2024-08-09 19:22:24 发布
最新推荐文章于 2024-08-09 19:22:24 发布
阅读量3.7k 收藏 5
点赞数
分类专栏： vue 文章标签： vue nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sy_callpolice/article/details/88031018
版权
本文介绍了如何在Windows环境下将Vue项目打包并部署到Nginx服务器。首先修改vue项目的util.js和index.js配置，使用`npm run build`打包生成dist文件夹。接着，从nginx官网下载并安装服务器，解决80端口占用问题。然后，配置nginx.conf，将dist文件夹内容替换html目录，并重启服务器。最后，通过访问127.0.0.1:80查看部署效果。
摘要由CSDN通过智能技术生成

vue项目打包

首先需要修改vue项目目录下的文件util.js
在这里插入图片描述
在这里插入图片描述
其次修改index.js中的配置
在这里插入图片描述
在这里插入图片描述
项目编码完成后，在项目根目录下按住shirt键加鼠标右键，选中在此处打开命令窗口，输入如下代码，项目打包完成后会在根目录下生成dist文件夹。

npm run build

Windows下安装nginx服务器

  1. 到nginx官网下载，链接：http://nginx.org/en/download.html

最低0.47元/天 解锁文章
噢～
关注
专栏目录
Windows系统下如何使用nginx部署vue2项目
m0_37873510的博客
09-24 7853
windows系统下使用nginx部署vue项目
Windows 使用 Nginx 部署 vue 项目
Wxin0721的博客
05-07 5889
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...
Vue环境配置（Windows）
最新发布
qq_63978748的博客
08-09 1126
PS：cnpm是由淘宝NPM镜像提供的一个npm的镜像服务客户端，用于在中国大陆地区加速npm包的安装，因为直接使用npm在国内有时候会比较慢。它使用了Vue团队推荐的最新项目模板，提供了一种无需全局安装Vue CLI的方式来创建Vue项目，更加简单快捷。vue的使用需要以node.js为前提，如果您的电脑上已经安装了node.js，可直接跳过这一步。现在，你就成功创建了一个你自己的Vue项目模板， 你可以按照自己的想法对各个模块进行修改。初次创建时，会询问我们是否下载对应的依赖项，我们输入y后回车即可。
Windows使用Nginx部署Vue项目
u012887668的博客
04-13 2628
在vue.config.js文件配置outputDir，为打包项目的文件夹名，自己命名参考vue项目下的package.json文件里scripts配置的prod命令，执行打包命令打包完成后的文件夹内文件如下图所示。
windows下vue+webpack前端开发环境搭建及nginx部署
源码好优多
01-19 1万+
windows下vue+webpack前端开发环境搭建及nginx部署 一、开发环境搭建 1、前端框架一般都依赖nodejs,我们首先要安装node.js。 请参考http://blog.csdn.net/qq_32340877/article/details/79092310。 2、由于许多npm的源都是在国外的地址，安装起来特别慢，所以我们这里利用淘宝的镜像服务器。 安装命令为：np
Vue部署至服务器步骤以及出现白屏,只有空白主界面和网页标题
qq_53208462的博客
03-22 7625
★:出现白屏问题主要出现于初次布置nginx目录下有默认的50.html和index.html把他们删除之后将dist所有文件拷贝至nginx/html路径下即可 1.npm run build 2.可以通过宝塔Linux面板一键安装nginx(可以搜搜怎么安装宝塔 很简单),之后配置 server { listen 80; //你的服务器端口 server_name 你的服务器地址; location / { root
vue项目部署到nginx/tomcat服务器的实现
10-16
总结来说，Vue项目部署到Nginx或Tomcat服务器的主要步骤包括修改路由模式、配置服务器以处理history模式下的前端路由、打包Vue项目、在服务器上配置存放静态资源的目录，并确保web.xml中的错误处理设置能正确处理...
web服务器nginx+部署前端vue项目
03-22
假设我们需要将一个基于 Vue.js 的前端项目部署到 Nginx 上，下面是一些基本的步骤： 1. **准备环境**： - 安装 Nginx。确保你的系统上已经安装了 Nginx 服务器。 - 准备好前端 Vue 项目。确保你的 Vue 项目已经...
Vue-cli项目部署到Nginx服务器的方法
10-16
Vue CLI 项目部署到 Nginx 服务器是将构建后的静态资源发布到 Nginx 服务器上，以便通过 Nginx 提供服务。 1. **Nginx 安装与基本操作** - Nginx 是一款高性能的 HTTP 和反向代理服务器，可以在多种操作系统上运行...
Vue项目部署Nginx配置文件 SSL
08-11
在部署 Vue 项目时，Nginx 配置文件 `nginx.conf` 的关键设置如下： 1. **基本配置**： - `server` 块：定义一个监听特定端口（通常是80）的服务器实例。 ```nginx server { listen 80; server_name your...
vue2 - 解决本地nginx部署vue项目只能访问默认页面问题
qq_43526329的博客
10-24 1189
解决本地nginx部署vue项目只能访问默认页面问题
解决nginx部署vue项目只能访问默认页面问题
yzwdzkn的博客
01-27 4747
在通过nginx启动vue以后我们在访问页面的时候只能访问默认页面和通过项目内跳转其他页面，如果直接访问就会出现404 可以看到nginx并不识别vue的其他页面，这跟conf文件的配置有关 location / { root C:/web/dist; index index.html index.htm; } 这是我们基础的配置，按照字义解读就是只访问了/dist文件下的 index.html、index.htm页面，而其他页面在
vue项目打包部署在windows或linux服务器上
sheng_xinjun的博客
09-30 5646
vue项目打包部署在windows或linux服务器上
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文件，用文本方式打开，进行
Windows系统使用Nginx部署Vue
2301_78834737的博客
07-12 2616
Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。,出现以下界面说明启动成功(由于笔者电脑80端口被占用，所以更改为8080，nginx默认为80端口)。工具，将Nginx转换为Windows服务，Windows系统重启后会自动启动Nginx服务。​ 配置文件如下：主要包含日志位置、启动和关闭，目录根据自己安装位置调整（不要有中文）。用cmd命令窗口，cd 到nginx解压目录，，根据系统版本下载对应工具。
windows系统搭建VUE环境(vue-cli4)
dreamingbaobei的博客
03-26 4400
第一步:node环境安装 第二步:node环境检测 第三步:设置nodejs的global和cache路径 第四步: 配置PATH环境变量 第五步: vue-cli脚手架安装 第六步: 创建一个项目hello-world 第七步: 修改默认端口
【后台部署】Windows服务器部署RuoYi-Vue前后端分离项目
pt
04-06 7754
Windows服务器部署RuoYi-Vue前后端分离项目
Windows 下IIS 部署 VUE项目教程
zjl1353911的博客
04-07 5645
本文看完可以实现,在Windows 下IIS部署一个VUE 网站
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值