场景

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 run build

打包成功后

会在项目目录下生成dist目录。此目录就是打包之后的目录。

然后在dist目录下新建server.js

var express = require('express');var app = express();const hostname = '12.12.12.12';const port = 8080;app.use(express.static('./'));app.listen(port, hostname, () => {console.log(`Server is running `);});

注意要把这里的hostname改为要部署的服务器的ip,这里的12.12.12.12是随便填写。

切记要修改为自己服务器的ip。

这里也不能用localhost。

然后登录到Windows Server 服务器上，找一个磁盘目录。将整个dist目录复制到服务器上。

注意这里新建server.js的目的是为例使用node的express作为服务器去启动项目。

如果不想用express还可以使用tomcat、nginx、IIS等。

这里以使用express为例。

首先需要在服务器上安装node。

然后在服务器上的dist目录下打开命令行，使用npm 安装express

npm install express

安装express成功后启动服务

node server

注意这里启动的ip为localhost，正常应该是你在server.js中设置的ip。这里只是为了演示用。

然后在确保你服务器的防火墙和8080端口没有问题后就可以在浏览器中通过

http://你的IP:8080/index.html

来进行访问服务器上的项目

Vue项目怎样打包并部署在WindowsServer服务器通过IP访问相关推荐

Vue项目如何打包并部署(nginx)
使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署. 一.打包 vue项目其实可以直接通过一下语句进行打包: npm run build 默认打包情况如下: 当我们需要将打包名称以 ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
Vue项目的打包\部署\优化
Vue项目的打包\部署\优化如果有帮助到你麻烦点个赞或者收藏 +关注哟以后会经常发布一些干货文章我只是一个前端小菜鸟,大佬勿喷! 一.nginx 开启 gzip 理论上,nginx 开启 ...
vue项目dist编译文件部署到服务器：页面空白、F5刷新报错404、403报错、等等bug - 总结篇
文章目录问题一. vue编译打包dist文件之后部署到线上服务器 ,访问页面却是空白? 问题二.如果不是空白,页面F5之后就又变成空白? 以Nginx服务器为例,(如下图FTP所示) `404报错: ...
vue项目构建打包发布三部曲
一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了 2.安装脚手架此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的 ...
spring项目搭建云服务器,Spring Boot项目打包并部署到云服务器
Spring Boot项目打包并部署到云服务器一.云服务器的环境 OS: CentOS 7 Jdk 1.8 Spring Boot自动集成Tomcat,不需要单独配置二.本地Spring Boot ...
Linux中把文件夹打成war包,SpringBoot中maven项目打成war包部署在liunx服务器上的方法...
说明:Spring Boot由于内嵌了如Tomcat,Jetty和Undertow这样的容器,也就是说可以直接跑起来,用不着再像Spring项目还需要外置的Tomcat等容器来进行部署工作了,通过启动 ...
【前端部署】vue项目打包并部署到Linux服务器
文章目录一.打包vue前端项目二.安装nginx 1.下载及安装 2.启动程序 3.其他命令三.利用WinSCP传输文件四.配置nginx 1.修改服务器端口 2.修改dist存放路径 3.完 ...

Vue项目怎样打包并部署在WindowsServer服务器通过IP访问

场景

实现

Vue项目怎样打包并部署在WindowsServer服务器通过IP访问相关推荐

最新文章

热门文章