Vue本地执行build之后打开dist目录下index.html正常访问 | 您所在的位置:网站首页 › dest下载完不能用 › 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
|
CopyRight 2018-2019 实验室设备网 版权所有 |