首页 IT程序员内容详情

三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题

2021-03-31 18686 编程艺术家

index.html为什么打不开?

Vue打包后生成的dist文件中的index.html,双击在浏览器中打开后发现一片空白,打开控制台有很多报错:“Failed to load resource: net::ERR_FILE_NOT_FOUND”。

这是因为dist文件是需要放在服务器上运行的,资源默认放在根目录下。打开index.html可以发现,css和js文件的引用使用的是绝对路径,例如:<link href=/css/chunk-00d5eabc.f78fa75d.css rel=prefetch>,对本地磁盘来说,/指向磁盘根目录,所以找不到引用的文件。

有以下解决方案:1. 使用http-server创建一个服务器来访问资源;2. 将index.html中资源引用的绝对路径改为相对路径;3.还可以手写一个简单的node服务器。

使用http-server

http-server是一个基于命令行的http服务器。使用方法很简单:

  1. 安装:npm install http-server -g

  2. 进入dist文件夹:cd dist

  3. 执行命令:http-server

大功告成!可以打开浏览器在localhost:8080中查看了。

将绝对路径改为相对路径

可以选择手动将index.html中所有引用资源的地方全部改成相对路径,如:<link href=./css/chunk-00d5eabc.f78fa75d.css rel=prefetch><link href=css/chunk-00d5eabc.f78fa75d.css rel=prefetch>

当然,更优雅的做法是修改项目的publicPath:

// vue.config.js module.exports = {     // ...     publicPath: './'     // ... }; 复制代码

此时再运行npm run build打包后,打开dist/index.html发现所有资源的引用形式已经变为相对路径:<link href=css/chunk-00d5eabc.f78fa75d.css rel=prefetch>,此时可以双击index.html在浏览器中正常访问了!

手写一个简单的node服务器

在dist同级目录中新增文件server.js:

// server.js // 1. 引入接下来要用到的node内置模块 const http = require('http'); const url = require('url'); const path = require('path'); const fs = require('fs'); // 2. 利用path解析当前目录,然后拼接dist目录,使得服务器当前的根目录变为dist const root = path.join(path.resolve(process.argv[2] || '.'), 'dist'); // 3. 创建http服务器 const server = http.createServer((request, response) => {   // 4. 解析请求url获取文件路径   const pathname = url.parse(request.url).pathname;   const filepath = path.join(root, pathname);      // 5. 使用fs文件系统模块读取index.html文件并返回给前端   fs.stat(filepath, (err, stats) => {     if (!err && stats.isFile()) {       // 响应头设为200       response.writeHead(200);       // 创建一个读写流管道,将index.html文件内容写入response并返回       fs.createReadStream(filepath).pipe(response);     } else {       // 请求路径不对时返回404       response.writeHead(404);       response.end('404 Not Found');     }   }); }); // 6. 服务器监听8080端口 server.listen(8080); 复制代码

命令行定位到server.js同级目录中执行node server.js,此时在浏览器中可以访问http://localhost:8080/index.html查看效果。


作者:举杯邀明月
链接:https://juejin.cn/post/6844904064317128711
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


相关标签: # vue

 暂无评论,快来抢沙发吧~

发布评论