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

index.html为什么打不开？

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

这是因为dist文件是需要放在服务器上运行的，资源默认放在根目录下。打开index.html可以发现，css和js文件的引用使用的是绝对路径，例如：，对本地磁盘来说，/指向磁盘根目录，所以找不到引用的文件。

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

使用http-server

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

安装：npm install http-server -g

进入dist文件夹：cd dist

执行命令：http-server

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

将绝对路径改为相对路径

可以选择手动将index.html中所有引用资源的地方全部改成相对路径，如：或。

当然，更优雅的做法是修改项目的publicPath：

// vue.config.js

module.exports = {

// ...

publicPath: './'

// ...

};

复制代码

此时再运行npm run build打包后，打开dist/index.html发现所有资源的引用形式已经变为相对路径：，此时可以双击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查看效果。