vue项目 dist文件本地部署、http-server网页服务

1 篇文章 0 订阅
1 篇文章 0 订阅

使用 http-server

http-server是一个超轻量级web服务器

当我们想要在服务器运行一些代码,但是又没有服务器的时候,就可以使用http-server就可以搞定了。

http-server可以将任何一个文件夹当作服务器的目录供自己使用。【仅仅限于局域网下】

用于测试项目使用 测试项目部署 是否会有问题

部署app、pc网站、软件都可以

http-server 个人项目使用介绍:   这是用于局域网下 远程下载App软件、测试dist文件是否有问题。
                              用处还是可以的,简单明了

使用步骤:

1、全局安装

  npm install http-server -g

2、vue.config.js文件做好配置,打包项目 (具体看个人什么类型项目【app、pc】网站、软件都可以)
后端需要远程服务器(局域网后端,不同电脑下。可能不行,具体自己查吧。)

 publicPath:process.env.NODE_ENV === "production" ? "https://XXX.xxx.com/jsgl" : "/",

会有影响,打包是本地测试,就可以注释它(这是打包生产环境下的css、js这些静态文件)

npm run build

3、生成dist文件,在dist文件打开终端
在这里插入图片描述
4、运行

http-server -p 3000 -P https://XXXX.xxxx.com

效果:
在这里插入图片描述

访问里面 url 随便一个就可以了

为了将Vue项目部署服务器上,你可以按照以下步骤进行操作: 1. 构建项目:在本地开发环境中,使用命令行进入Vue项目的根目录,并运行以下命令来构建项目: ``` npm run build ``` 这将生成一个名为`dist`的文件夹,其中包含了构建后的静态文件。 2. 配置服务器:将构建后的静态文件上传到服务器。你可以使用FTP、SFTP或其他文件传输协议将`dist`文件夹上传到服务器上。 3. 安装HTTP服务器:在服务器上安装一个HTTP服务器来托管Vue项目的静态文件。你可以选择使用Nginx、Apache等常见的HTTP服务器。 - 对于Nginx,你需要在Nginx的配置文件中添加一个新的server配置块,并设置`root`指令指向Vue项目的`dist`文件夹的路径。例如: ``` server { listen 80; server_name your_domain.com; root /path/to/dist; location / { try_files $uri $uri/ /index.html; } } ``` 这将使Nginx监听80端口,并将请求转发到Vue项目的`index.html`文件。 - 对于Apache,你可以在Apache的配置文件中添加一个新的VirtualHost,并设置`DocumentRoot`指令指向Vue项目的`dist`文件夹的路径。例如: ``` <VirtualHost *:80> ServerName your_domain.com DocumentRoot /path/to/dist <Directory /path/to/dist> Options Indexes FollowSymLinks MultiViews AllowOverride All Require all granted </Directory> </VirtualHost> ``` 这将使Apache监听80端口,并将请求指向Vue项目的`index.html`文件。 4. 启动服务器:保存服务器配置文件后,重启Nginx或Apache服务器以使配置生效。 5. 验证部署:在浏览器中访问你的域名或服务器的IP地址,应该能够看到Vue项目服务器上成功部署的页面。 请注意,以上步骤只是一种常见的部署Vue项目的方法,具体步骤可能因服务器环境和需求而有所不同。在进行部署之前,建议先了解你所使用的服务器和相关软件的文档和配置方式。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值