Vue本地执行build之后打开dist目录下index.html正常访问

场景

Vue的项目执行

npm run build

 后会在本地dist下生成打包后的文件

但是此文件给后端后就能访问,

如果直接在本地双击在浏览器中打开就会提示一堆文件路径找不到。

这是因为直接在本地访问打开的话,请求资源的url是如上图file://那种开头的路径,需要的是类似于

localhost:8080/这样的在服务器中的访问路径。

经过参考别人的博客,有将vue.config.js中的

publicPath: './', 

改为相对路径的,但是在我这里不适用。

注:

博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

可以通过在本地启用一个服务来访问。

首先在dist目录下新建server.js

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

注意上面的hostname指的是访问的ip,这里是localhost代表本机。

但是使用了localhost后不能使用本机Ip进行访问。

同理如果想将此项目部署到服务器中,也不能设置为localhost,必须设置为服务器的ip。

然后port是端口号,这里是8080

上面是使用的node的的web应用框架Express来充当本地服务器。

所以需要在本地安装express。这里使用npm进行安装。

所以前提是你的电脑需要安装node

所以在dist目录下打开命令行

npm install express

安装成功后启动express服务

node server

启动成功后localhost:8080就相当于dist目录,所以如果想访问dist下的index.html就需要访问

http://localhost:8080/index.html

 

 

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值